Grid - jQuery LigerUI API

jQuery ligerUI

事件列表

事件名 参数 描述
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 });