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 =
'<a handler="'+ handler +'" val="'+ value +'" index="'+ index + '"' +
' style="text-decoration:none;font-size:16px;color:'+ color +';" href="javascript:;" title="'+ title +'">' +
'</a>';
return oper;
};
</script>
执行结果如下: