Question

请问easyui中的table怎么添加一空行（可编辑的）

Answer 1

<link href="EasyUI/themes/default/easyui.css" rel="stylesheet" />
<link href="EasyUI/themes/icon.css" rel="stylesheet" />
<script src="EasyUI/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="EasyUI/jquery.easyui.min.js" type="text/javascript"></script>

<a id="btnAdd" href="javascript:void(0)">新增</a>
<a id="btnDel" href="javascript:void(0)">移除</a>
<a id="btnReject" href="javascript:void(0)"">撤销</a>
<div id="dg"></div>

javascript代码：

$(function () {
    $("#btnAdd").click(function () { addRow(); }).linkbutton({ iconCls: 'icon-add', plain: true });
    $("#btnDel").click(function () { delRow(); }).linkbutton({ iconCls: 'icon-remove', plain: true });
    $("#btnReject").click(function () { rejectRow(); }).linkbutton({ iconCls: 'icon-undo', plain: true });
    $("#dg").datagrid({
        title: "DataGrid可编辑",
        //url: "Handler1.ashx",
        data: {
            "total": "2", "rows": [
                { "id": "0", "name": "Rosa", "remark": "这是一个大boss", "state": "0" },
                { "id": "1", "name": "Nick", "remark": "", "state": "0" },
                { "id": "2", "name": "Connie", "remark": "nothing", "state": "1" }]
        },
        columns: [[
            { field: "id", title: "ID", width: 20 },
            {
                field: "name", title: "姓名", width: 20,
                editor: {
                    type: "text",
                    options: {
                        required: true
                    }
                }
            },
            {
                field: "remark", title: "备注", width: 60,
                editor: {
                    type: "text",
                    options: {
                        required: true
                    }
                }
            },
            {
                field: "state", title: "显示", width: 60,
                editor: {
                    type: "combobox",
                    options: {
                        valueField: "id",
                        textField: "text",
                        data: [{ id: 0, text: "否" }, { id: 1, text: "是" }],
                        panelHeight: 50,
                        required: true
                    }
                }
            }
        ]],
        fitColumns: true,
        width: 500,
        height: 250,
        onClickRow: onClickRow
    });
});
// 判断时候存在编辑中的行
var editIndex = null;
function endEditing() {
    if (editIndex == null) { return true }
    if ($('#dg').datagrid('validateRow', editIndex)) {
        $('#dg').datagrid('endEdit', editIndex);
        editIndex = null;
        return true;
    } else {
        return false;
    }
}
// datagrid行点击事件
function onClickRow(index, row) {
    if (editIndex != index) {
        if (endEditing()) {
            $("#dg").datagrid("selectRow", index).datagrid("beginEdit", index);
            editIndex = index;
        } else {
            $("#dg").datagrid("selectRow", editIndex);
        }
    }
}
// 添加一行
function addRow() {
    if (endEditing()) {
        //$("#dg").datagrid("appendRow");
        $("#dg").datagrid("appendRow", {
            name: "",
            remark: "",
            state: "0"
        });
        editIndex = $("#dg").datagrid("getRows").length - 1;
        $("#dg").datagrid("selectRow", editIndex).datagrid("beginEdit", editIndex);
    }
}
// 删除一行
function delRow() {
    if (editIndex == null) { return }
    $('#dg').datagrid('cancelEdit', editIndex).datagrid('deleteRow', editIndex);
    editIndex = null;
}
// 撤销修改
function rejectRow() {
    $('#dg').datagrid('rejectChanges');
    editIndex = null;
}