首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 媒体动画 > flex >

jQuery插件flexigrid应用总结-进一步优化

2012-10-09 
jQuery插件flexigrid使用总结--进一步优化?参考原文地址:http://www.iteye.com/topic/611837?之前看了,前

jQuery插件flexigrid使用总结--进一步优化

?参考原文地址:http://www.iteye.com/topic/611837

?

之前看了,前面人的总结,感觉flexigrid还是很不错的,但是距离真正应用还是有一定的差距的,主要是没有做js验证这块,搜索条件那块看起来也不爽,另外就是下拉框这块,于是投入了一定的时间来进一步完善他。

(这块工作可能相对于js大牛来说很简单,可是对于我来说还真是不算简单,不过做出来的效果还算是满意,下面贴效果图)

?

jQuery插件flexigrid应用总结-进一步优化

?

jQuery插件flexigrid应用总结-进一步优化

?

jQuery插件flexigrid应用总结-进一步优化

?

?

$("#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>

热点排行