JQueryLigerUI插件基础函数的使用方法实例介绍
程序员文章站
2022-07-10 12:54:03
jquery ligerui作为我最近尝使用的前端插件之一,我针对其使用进行总结:
一、我针对其方法的调用做简单介绍,有三种方式(以数据表格为例):
$("#dg").lig...
jquery ligerui作为我最近尝使用的前端插件之一,我针对其使用进行总结:
一、我针对其方法的调用做简单介绍,有三种方式(以数据表格为例):
$("#dg").ligergrid().getrow(index); /** 有参方法的使用*/ $("#dg").ligergrid('getselectedrow'); /**针对没有参数的方法*/ /** js中初始化数据表格,并赋值*/ var dg = $("#dg").ligergrid({/** js 初始化部分省略*/}) dg.getrow(index);
二、针对js方法的优化
1、给数据表格的某一个单元格渲染(redener)后,点击单元格进行事件操作。
由于jquery ligerui自带的getselectedrow() 必须先选择一行后,再次点击单元格中的按钮进行操作,需要用户进行对一行点击两次进行操作,用户使用感极差。
此时可以利用jquery ligerui 中的getrow(index) 方法进行获取行,代码附上:
<script> $("#dg").ligergrid({ columns:[ {name: 'id', display: '查看操作',align:'center',width: '10%', render:function (row,index,value){ return globals.func.getcelloper("look", value, index, "查看","red"); } }, {name: 'name',display: '姓名', align: 'left', width:'10%'}, ], url:url,//请求路径 parms:{},//参数 rownumbers: true, // 显示序号 frozenrownumbers:true, // 行序号是否在固定列中 enabledsort:true, //是否允许排序 height:295, pagesize:globals.prop.pagesize, pagesizeoptions :globals.prop.pagelist, pagesizeparmname:'rows', loadfilter:function(data){ var json = { rows : data.rows, total : data.total }; return json; }, onaftershowdata:function(data){/**数据加载完成后的操作*/ $('look').unbind('click').click(function(){ **var row = $("#dg").ligergrid().getrow($(this).closest("a").attr('index')) ;** console.log(row) }) } }); globals.func.getcelloper = function(handler,value,index,title,color,icon){ var oper = '' + ''; return oper; }; </script>
执行结果如下:
上一篇: js背景图片随机切换效果实现教程
下一篇: 模拟服务器