jQuery插件flexigrid使用总结--进一步优化
?参考原文地址:http://www.iteye.com/topic/611837
?
之前看了,前面人的总结,感觉flexigrid还是很不错的,但是距离真正应用还是有一定的差距的,主要是没有做js验证这块,搜索条件那块看起来也不爽,另外就是下拉框这块,于是投入了一定的时间来进一步完善他。
(这块工作可能相对于js大牛来说很简单,可是对于我来说还真是不算简单,不过做出来的效果还算是满意,下面贴效果图)
?
?
?
?
?
$("#flex").flexigrid({ url : 'all.action', dataType : 'json', colModel : [{ display : 'ID', name : 'id', width : 50,// 得加上 要不IE报错 sortable : true,check:'required', align : 'center' }, { display : '商品名称', name : 'name', width : 100, sortable : true, align : 'center' }, { display : '标准', name : 'stand', width : 100, sortable : true, align : 'center', selectOpt:{'1':'箱','2':'包','3':'个'} }, { display : '单价', name : 'money', width : 100, sortable : true, align : 'center' }, { display : '库存', name : 'leavings', width : 100, sortable : true, align : 'center' }, { display : '已经订购', name : 'orders', width : 100, sortable : true, align : 'center' }], buttons : [{ name : '添加', bclass : 'add', onpress : action }, { // 设置分割线 separator : true }, { name : '修改', bclass : 'edit', onpress : action }, { separator : true }, { name : '删除', bclass : 'delete', onpress : action }, { separator : true }], searchitems : [{ display : 'ID', name : 'id', isdefault : true }, { display : '库存', name : 'leavings',check:'required' }, { display : '标准', name : 'stand',displayType : 'select',check:'required',selectOpt:{'1':'箱','2':'包','3':'个'}}], sortname : "id", sortorder : "asc", usepager : true, title : '商品信息', useRp : false, checkbox : true,// 是否要多选框 rowId : 'id',// 多选框绑定行的id rp : 15, showTableToggleBtn : false, width : 900, height : 340 });
??
?
?
?
<form id="frmId" method="post"><table width="252" border="0" align="center" cellpadding="0" cellspacing="0"><tr><td name="id" type="text" name="name" name="money" name="leavings" name="orders" id="submit" value="提交" /><input type="reset" value="重置" /></div></form>