EasyUI datagrid 行编辑

一、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>

二、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>

三、完整示例页面：

@{    Layout = "~/Views/Shared/_Layout.cshtml";}@using Model.Suya;@using Suya.PMP.Contract.Model;@{    BeforeAllocationModel beforeAllocation = ViewData["BeforeAllocationModel"] as BeforeAllocationModel;}<link href="/Content/Plugins/UploadifyJs/uploadify.CSS" rel="stylesheet" type="text/css" /><script src="/Content/Plugins/UploadifyJs/swfobject.js" type="text/javascript"></script><script src="/Content/Plugins/UploadifyJs/jquery.uploadify-3.1.min.js" type="text/javascript"></script><link href="/Content/Styles/css1/main.css" rel="stylesheet" type="text/css" /><script type="text/javascript">    $(function () {        //使用JavaScript创建数据表格        $('#checkList').datagrid({            url: '/PMP/BeforeAllocationManage/GetCheckList',     //一个用以从远程站点请求数据的超链接地址。控制器/方法            queryParams: {                parentId: "@beforeAllocation.id"            },            iconCls: 'icon-save',            loadMsg: '数据正在加载中,请稍后.....',    //当从远程站点载入数据时,显示的一条快捷信息。            singleSelect: true,               //设置为true将只允许选择一行            fitColumns: true,                  //设置为true将自动使列适应表格宽度以防止出现水平滚动            striped: true,                     //设置为true将交替显示行背景            pagination: false,                  //设置true将在数据表格底部显示分页工具栏。            rownumbers: true,                  //设置为true将显示行数。                           sortName: 'creatTime',                    //当数据表格初始化时以哪一列来排序。            sortOrder: 'desc',                  //定义排序顺序,可以是'asc'或者'desc'（正序或者倒序）。            idField: 'Id',                     //表明该列是一个唯一列。            onClickRow: checkClickRow,            onLoadSuccess: function (data) {                calCheckTotal(data.rows);            },            frozenColumns: [[                  //跟列属性一样,但是这些列固定在左边,不会滚动。                           ]],            columns: [[                         { field: 'id', title: 'ID', hidden: true },                         { field: 'checkTime', title: '校对时间', width: 100, align: 'center', sortable: true,                             formatter: dateformatter,                             editor: { type: 'datetimebox', options: { parser: dateparser, required: true} }                         },                         { field: 'baackTime', title: '返回时间', width: 100, align: 'center', sortable: true,                             formatter: dateformatter,                             editor: { type: 'datetimebox', options: { parser: dateparser, required: true} }                         },                         { field: '