EasyUI datagrid 行编辑

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

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