效果图:
需要引用脚本:
<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> <a href='#' onclick='reDo(" + index + ");'>取消</a>"; } else { return "<a href='#' style='cursor:pointer' onclick='editRow(" + index + ");'>编辑</a> <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; }