使用easyui的可編輯資料表格(editable datagrid)
阿新 • • 發佈:2019-02-07
相關的參考屬性、方法和事件:
1、列屬性:
2、datagrid事件:
3、datagrid方法:
4、示範程式碼:
<table id="myTable"></table> <script type="text/javascript"> $(function(){ //定義被編輯的行號 var rowNumber = 0; //頁面載入完成就渲染表格 $("#myTable").datagrid({ columns:[[ {title:"編號",field:"id",checkbox:true}, {title:"姓名",field:"name",width:100,editor:{ type:'validatebox', options:{} }}, {title:"學號",field:"studentNumber",width:100,editor:{ type:'numberbox', options:{} }}, {title:"性別",field:"gender",width:100,editor:{ type:'validatebox', options:{} }} ]], url:'${pageContext.request.contextPath}/data.json', rownumbers:true, singleSelect:true, toolbar: [{ text:'新增資料', iconCls:'icon-add', handler:function(){ $("#myTable").datagrid("insertRow",{ index:0, row:{} }); $("#myTable").datagrid("beginEdit",0); } }, { text:'編輯資料', iconCls:'icon-edit', handler:function(){ var hasSelect = $("#myTable").datagrid("getSelections"); if(hasSelect.length == 1){ //alert(hasSelect[0].name); var row = hasSelect[0]; rowNumber = $("#myTable").datagrid("getRowIndex",row); $("#myTable").datagrid("beginEdit",rowNumber); } } }, { text:'儲存修改', iconCls:'icon-save', handler:function(){ $("#myTable").datagrid("endEdit",rowNumber); } }], pagination:true, onAfterEdit:function(index,data,changes){ /* alert(index); console.info(data); */ $.post( "${pageContext.request.contextPath}/" ); } }); }) </script>
5、效果: