事件列表
事件名 | 参数 | 描述 |
onEndEdit | (editParm) | |
onRowDragDrop | (editParm) {rows,parent,near,after} | |
onDragCol | 拖动列事件 | |
onToggleCol | 切换列事件 | |
onChangeSort | 改变排序事件 | |
onSuccess | (data, grid) | 成功获取服务器数据的事件 |
onDblClickRow | (data,rowid,rowdata) | 双击行事件 |
onSelectRow | (rowdata, rowid, rowobj) | 选择行事件 |
onUnSelectRow | (rowdata, rowid, rowobj) | 取消选择行事件 |
onBeforeCheckRow | (checked, data, rowid, rowdata) | 选择前事件,可以通过return false阻止操作(复选框) |
onCheckRow | (checked,data,rowid,rowdata) | 选择事件(复选框) |
onBeforeCheckAllRow | (checked,element) | 选择前事件 |
onCheckAllRow | (checked,element) | 选择事件(复选框 全选/全不选) |
onBeforeShowData | (currentData) | 显示数据前事件 |
onAfterShowData | (currentData) | 显示完数据事件 |
onError | (XMLHttpRequest, textStatus, errorThrown) | 错误事件 |
onSubmit | 提交前事件 | |
onReload | (grid) | 刷新事件 |
onToFirst | (element) | 第一页 |
onToPrev | (element) | 上一页 |
onToNext | (element) | 下一页 |
onToLast | (element) | 最后一页 |
onAfterAddRow | (rowdata) | 增加行后事件 |
onBeforeEdit | (editParm) | 编辑前事件 |
onBeforeSubmitEdit | (editParm) | 验证编辑器结果是否通过 |
onAfterEdit | (editParm) | 结束编辑后事件 |
onLoading | 加载时函数 | |
onLoaded | (grid) | 加载完函数 |
onContextmenu | ({data,rowindex,row},e) | 右击事件 |
onBeforeCancelEdit | 取消编辑前事件 | |
onAfterSubmitEdit | ({record,rowindex,newdata}) | 编辑后事件 |
onGroupExtend | () | 分组展开事件 |
onGroupCollapse | () | 分组收缩事件 |
onLoadData | () | 加载数据前事件 |
onDblClickRow事件 示例:
1 onDblClickRow : function (data, rowindex, rowobj) 2 { 3 $.ligerDialog.alert('选择的是' + data.CustomerID); 4 }
onBeforeEdit事件 示例:
1 <script type="text/javascript"> 2 3 var DepartmentList = DepartmentData.Rows; 4 var sexData = [{ Sex: 1, text: '男' }, { Sex: 2, text: '女'}]; 5 $(f_initGrid); 6 7 function f_initGrid() 8 { 9 $("#maingrid").ligerGrid({ 10 columns: [ 11 { display: '主键', name: 'ID', width: 50, type: 'int' }, 12 { display: '名字', name: 'RealName', 13 editor: { type: 'text' } 14 }, 15 { display: '性别', width: 50, name: 'Sex', 16 editor: { type: 'select', data: sexData, valueField: 'Sex' }, 17 render: function (item) 18 { 19 if (parseInt(item.Sex) == 1) return '男'; 20 return '女'; 21 } 22 }, 23 { display: '年龄', name: 'Age', width: 50, type: 'int', editor: { type: 'int'} }, 24 { display: '入职日期', name: 'IncomeDay', type: 'date', width: 100, editor: { type: 'date'} }, 25 { 26 display: '部门', name: 'DepartmentID', width: 120, isSort: false, textField: 'DepartmentName', 27 editor: { type: 'select', data: DepartmentList, valueField: 'DepartmentID', textField: 'DepartmentName' } 28 }, 29 { display: '地址', name: 'Address', 30 editor: { type: 'text' }, align: 'left', width: 300 31 } 32 ], 33 enabledEdit: true, isScroll: false, 34 onBeforeEdit: f_onBeforeEdit, 35 onBeforeSubmitEdit: f_onBeforeSubmitEdit, 36 onAfterEdit: f_onAfterEdit, 37 data: EmployeeData, 38 width: '100%' 39 }); 40 } 41 //只允许编辑前3行 42 function f_onBeforeEdit(e) 43 { 44 if(e.rowindex<=2) return true; 45 return false; 46 } 47 //限制年龄 48 function f_onBeforeSubmitEdit(e) 49 { 50 if (e.columnname == "Age") 51 { 52 if (e.value < 20 || e.value > 30) return false; 53 } 54 return true; 55 } 56 //编辑后事件 57 function f_onAfterEdit(e) 58 { 59 if (e.columnname == "Age") 60 { 61 alert(e.value); 62 } 63 } 64 function getSelected() 65 { 66 var manager = $("#maingrid").ligerGetGridManager(); 67 var row = manager.getSelectedRow(); 68 if (!row) { alert('请选择行'); return; } 69 alert(JSON.stringify(row)); 70 } 71 function getData() 72 { 73 var manager = $("#maingrid").ligerGetGridManager(); 74 var data = manager.getData(); 75 alert(JSON.stringify(data)); 76 } 77 </script>
onContextmenu事件 示例:
1 menu = $.ligerMenu({ width: 120, items: 2 [ 3 { text: '增加', click: itemclick, icon: 'add' }, 4 { text: '修改', click: itemclick }, 5 { line: true }, 6 { text: '查看', click: itemclick } 7 ] 8 }); 9 grid = $("#maingrid4").ligerGrid({ 10 columns: [ 11 { display: '主键', name: 'CustomerID', align: 'left', width: 120 }, 12 { display: '公司名', name: 'CompanyName', minWidth: 60 }, 13 { display: '联系名', name: 'ContactName', minWidth: 140 }, 14 { display: '城市', name: 'City' } 15 ], pageSize: 30, data: CustomersData, sortName: 'CustomerID', 16 width: '100%', height: '100%', onRClickToSelect:true, 17 onContextmenu : function (parm,e) 18 { 19 actionCustomerID = parm.data.CustomerID; 20 menu.show({ top: e.pageY, left: e.pageX }); 21 return false; 22 } 23 });