EasyUI 行编辑模式

EasyUI在线API：http://www.jeasyui.net/plugins/

EaysUI 行编辑模式记录

参考：http://www.cnblogs.com/kexb/p/3685913.html 　　Jquery easyui开启行编辑模式增删改操作

　   　http://www.cnblogs.com/babietongtianta/p/3765484.html　　easyui datagrid 行编辑功能

1、引入EasyUI脚本

2、

<script src="/Content/JqEasyui/jquery-1.8.0.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="/Content/JqEasyui/jquery.easyui.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function () {
        LoadList();
    })
    function Save(id, index) {
        $("#tt").datagrid("endEdit", index);  //关闭editor编辑行,editor关闭时会在页面上保存修改后的数据
        $.post("/One/Update", $("#tt").datagrid('getSelected'), function (data) {
            if (data != "OK") {
                $.messager.alert('提示', "保存失败", 'error');
            } else {
                $.messager.alert('提示', "保存成功");
            }
            $("#tt").datagrid("load");
        })
    }
    function LoadList() {
        //没有editor对象,创建一个int记录被编辑的行号
        //当被编辑的行号为undefined时,则代表没有被编辑的行
        var editRow = undefined;
        $("#tt").datagrid({
            url: '/One/TestSelect',
            title: 'datagrid中editor测试', //标题
            iconClis: 'icon-edit', //图标
             660,
            height: 250,
            singleSelect: true, //单选开关 true(开)/false  控制只有一行能被选中
            idField: 'Id', //主键
            columns: [[
                            { field: 'Id', title: '序号',  60 },
                            { field: 'Name', title: '名称',  60,
                                editor: {  //定义行编辑事件
                                    type: 'text',  //editor框类型  text,textarea,checkbox,numberbox,validatebox,datebox,combobox,combotree
                                    options: {  //editor选项，作用不明
                                        required: true
                                    }
                                }
                            },
                            { field: 'Class', title: '分类',  60,
                                editor: {
                                    type: 'text',
                                    options: {
                                        required: true
                                    }
                                }
                            },
                            { field: 'Other4', title: '操作',  70,   //添加操作列
                                formatter: function (value, row, index) {  //添加操作列同时设置点击事件
                                    return "<a  onclick='Save(" + row.Id + "," + index + ")' href='#'>保存</a>";
                                }
                            }
            ]],
            onDblClickRow: function (index, row) {  //双击行事件
                //验证是否有正在编辑行
                if (editRow != undefined) {  //editRow有值时则代表某一行正在编辑中
                    //关闭当前编辑行
                    $("#tt").datagrid("endEdit", editRow);
                    //开始编辑当前行
                    $("#tt").datagrid("beginEdit", index);
                } else {
                    $("#tt").datagrid("beginEdit", index);
                }
                editRow = index;  //记录当前编辑行号
            },
            onClickCell: function (index, row) {  //单击行事件
                //                $.messager.alert('提示', 'onBeforeSelect');
                if (editRow != undefined) {
                    //取消当前编辑行
                    $("#tt").datagrid("cancelEdit", editRow);
                    editRow = undefined;   
                }
            }
        })
    }
</script>
<table id="tt">
</table>