easyui---- 行内编辑、删除

效果图:

easyui---- 行内编辑、删除


需要引用脚本:

<link href="~/UILibs/easyui/themes/default/easyui.css" rel="stylesheet" />
<link href="~/UILibs/easyui/themes/icon.css" rel="stylesheet" />
<link href="~/Css/css.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.7.1.min.js"></script>

<script src="~/UILibs/easyui/jquery.easyui.min.js"></script>

<script src="~/UILibs/easyui/locale/easyui-lang-zh_CN.js"></script>


列表:

<body>   
        <a class="easyui-linkbutton" iconcls="icon-add" onclick="addRow();">添加</a>
        <a class="easyui-linkbutton" iconcls="icon-save" onclick="save();">批量提交</a>
        <table id="tb">
        </table>
</body>


显示字段内容:
            $("#tb").datagrid({
                fit: true,
                title: '行内编辑测试',
                border: false,
                striped: true,
                data: persons,
                rownumbers: true,
                columns: [[
                        {
                            title: '编号', field: 'ID',halign: 'center',align: 'center',width:100,
                            editor: { type: 'validatebox', options: { required: true } }
                        },
                        {
                            title: '姓名',field: 'Name',halign: 'center',align: 'center',width: 150,
                            editor: { type: 'validatebox', options: { required: true } }
                        },
                        {
                            title: '年龄',field: 'Age',halign: 'center',align: 'center',width: 100,
                            editor: { type: 'validatebox', options: { required: true } }
                        },
                        {
                            title: '性别',field: 'Sex',halign: 'center',align: 'center',width: 150,
                            formatter: function (value, row, index) {
                                //格式化性别
                                for (var i = 0; i < sexs.length; i++) {
                                    if (value == sexs[i].id) {
                                        return sexs[i].name;
                                    }
                                }
                            },
                            editor: {
                                type: 'combobox',
                                options:
                                    {
                                    valueField: 'id',
                                    textField: 'name',
                                    data: sexs,
                                    required: true
                                }
                            }
                        },
                         {
                             title: '操作',field: 'action',halign: 'center',align: 'center',width: 200,
                             formatter: function (value,row,index) {
                                 if (row.editing == true) {
                                     return "<a href='#' onclick='saveRow(" + index + ");'>确定</a>&nbsp;&nbsp;<a href='#' onclick='reDo(" + index + ");'>取消</a>";
                                 }
                                 else {
                                     return "<a href='#' style='cursor:pointer' onclick='editRow(" + index + ");'>编辑</a>&nbsp;&nbsp;<a href='#'  onclick='deleteRow(" + index + ");'>删除</a>";
                                 }
                             }
                         }
                ]],

编辑时文本框的格式在editor{type:"",options:""}设置

前台获取的数据(也可以后台调数据):

$(function () {
            var persons = [
                { ID: 1, Name: "aaa", Age: 20, Sex: "0" },
                { ID: 2, Name: "bbb", Age: 21, Sex: "1" },
                { ID: 3, Name: "ccc", Age: 22, Sex: "0" },
                { ID: 4, Name: "ddd", Age: 23, Sex: "1" }
            ];

      var sexs = [{ id: 0, name: "男" }, { id: 1, name: "女" }];


添加行:

easyui---- 行内编辑、删除

编辑触发事件(可以参考easyui-api文档datagrid):

easyui---- 行内编辑、删除

编辑、删除、保存:

easyui---- 行内编辑、删除

提交:

easyui---- 行内编辑、删除


UI层Model:

easyui---- 行内编辑、删除


controller:

  public ActionResult Save(Persons ps)
        {   
            return null;
        }