Skip to main content

Jquery Easyui中的坑

Jquery Easyui是一个不错的前端UI框架,它以非常低的学习和编程成本,尽可能的用非标准的HTML属性和特殊的css来标记页面,由框架统一解析为前端UI控件。
但是,框架的作者采用了类似半开源的方式,license可以使的软件免费使用,但是,它对javascript源码进行了混淆,不发布源码,文档虽然还算整理的不错,但是一旦遇到坑,那就十分捉急。但是,我对其用来做demo的速度赞不绝口,所以总结各种坑与大家共享如下:

坑1:DataGrid如何使用动态的查询参数?
场景如下,一个Datagrid上额外增加了几个表单参数,要动态的使用这些参数,就很麻烦。
如果你使用:

$('#orderGrid').datagrid('reload',
{
//参数对
});

这种情况下,每个表单的onchange都不想这么调用一遍,代码十分重复,而且一旦表单多,逻辑复杂,基本不可能实现。

另外一种情况是使用queryParams,但是这个参数设置后就不变了,是静态参数,
var orderGrid = $('#orderGrid').datagrid({
queryParams: {
startDate: $('#startDate').datebox('getValue'),
endDate:$('#endDate').datebox('getValue')
}
});

实现从queryParams入手,
一,获得到参数
var param=$('#orderGrid').datagrid('options').queryParams;
二,修改参数
param.startDate = ... ... ;
param.endDate = ... ...;

三,把参数设置回去(这一步很重要只有重设才会触发更改!)
$('#orderGrid').datagrid('options').queryParams=param;

坑二:datagrid的$(‘#orderGrid’).datagrid(‘getChecked’)和$(‘#orderGrid’).datagrid(‘getSelection’)等方法获取选中不一致的问题。

选中事件onCheck, onUncheck, onCheckAll, onUncheckAll配合使用时,建议使用回调参数
onUncheck:function(index,row)的index和row参数来决定选中行。直接使用$(‘#orderGrid’).datagrid(‘getSelection’)等方法得到的选择状态莫名其妙的错误和不一致。