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-api文档datagrid):


编辑、删除、保存:


提交:



UI层Model:



controller:

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