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

来源：互联网发布：c语言中制表符怎么用? 编辑：程序博客网时间：2024/06/05 06:51

效果图：

需要引用脚本：

列表：

显示字段内容：

            $("#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;
}

阅读全文

0 0