一、HTML：
<div class="info"> <div class="info_tt"> <span class="info_tt1">明细</span> <span class="pucker2"></span><a class="del" onclick="detailDel()" href="javascript:void(0)">删除</a> <a class="sure" onclick="detailOK()" href="javascript:void(0)"> 确认</a> <a class="add" onclick="detailAdd()" href="javascript:void(0)">添加</a> </div> <div> <table id="detailList"> </table> </div></div>
View Code
二、JS：
<script type="text/javascript"> $(function () { //使用JavaScript创建数据表格 $('#detailList').datagrid({ url: '/PMP/EntryNoticeManage/GetDetailList', //一个用以从远程站点请求数据的超链接地址。控制器/方法 queryParams: { type: 1, entryNoticeId: 0, proTaskId: 0 }, iconCls: 'icon-save', loadMsg: '数据正在加载中,请稍后.....', //当从远程站点载入数据时,显示的一条快捷信息。 singleSelect: true, //设置为true将只允许选择一行 fitColumns: true, //设置为true将自动使列适应表格宽度以防止出现水平滚动 striped: true, //设置为true将交替显示行背景 pagination: false, //设置true将在数据表格底部显示分页工具栏。 rownumbers: true, //设置为true将显示行数。 pagePosition: 'bottom', //定义的分页栏的位置。可用的值有 'top','bottom','both'。 sortName: 'creatTime', //当数据表格初始化时以哪一列来排序。 sortOrder: 'desc', //定义排序顺序,可以是'asc'或者'desc'（正序或者倒序）。 idField: 'Id', //表明该列是一个唯一列。 onClickRow: detailClickRow, frozenColumns: [[ //跟列属性一样,但是这些列固定在左边,不会滚动。 ]], columns: [[ { field: 'Id', title: 'ID', hidden: true }, { field: 'ProtastDetId', title: 'ProtastDetId', hidden: true }, { field: 'WorkContent', title: '工作内容', width: 100, align: 'center', sortable: true, editor: { type: 'textbox', options: { validType: 'length[1,50]', required: true} } }, { field: 'Remarks', title: '备注', width: 100, align: 'center', sortable: true, editor: { type: 'textbox', options: { validType: 'length[0,500]'} } } ]] }); //end datagrid loadgrid(1, "@entryNotice.Id", 0); }); //明细编辑行索引 var detailEditIndex = undefined; //明细结束编辑 function detailEndEdit() { if (detailEditIndex == undefined) { return true } if ($('#detailList').datagrid('validateRow', detailEditIndex)) { $('#detailList').datagrid('endEdit', detailEditIndex); detailEditIndex = undefined; return true; } else { return false; } } //明细点击行 function detailClickRow(index) { if (detailEditIndex != index) { if (detailEndEdit()) { $('#detailList').datagrid('selectRow', index) .datagrid('beginEdit', index); detailEditIndex = index; } else { $('#detailList').datagrid('selectRow', detailEditIndex); } } } //添加行 function detailAdd() { if (detailEndEdit()) { $('#detailList').datagrid('appendRow', {}); detailEditIndex = $('#detailList').datagrid('getRows').length - 1; $('#detailList').datagrid('selectRow', detailEditIndex) .datagrid('beginEdit', detailEditIndex); } } //删除行 function detailDel() { if (detailEditIndex == undefined) { return } $('#detailList').datagrid('cancelEdit', detailEditIndex) .datagrid('deleteRow', detailEditIndex); detailEditIndex = undefined; } //临时保存 function detailOK() { if (detailEndEdit()) { $('#detailList').datagrid('acceptChanges'); } } //重新查询，显示第一页 function loadgrid(type, entryNoticeId, proTaskId) { $('#detailList').datagrid('load', { type: type, entryNoticeId: entryNoticeId, proTaskId: proTaskId }); $('#detailList').datagrid('clearSelections'); }</script>View Code
原标题：EasyUI datagrid 行编辑
关键词：DataGrid
我知道了 