easyui的自动分页表格以及行编辑模式edatagrid

最新推荐文章于 2021-01-08 16:17:22 发布

_Chris

最新推荐文章于 2021-01-08 16:17:22 发布

阅读量6.2k

点赞数

分类专栏：插件示例

本文链接：https://blog.csdn.net/rj532029887/article/details/46438743

版权

插件示例专栏收录该内容

13 篇文章 0 订阅

订阅专栏

1,easyui 分享链接:http://pan.baidu.com/s/1sjwpbLr

2,效果图

3,代码实现

<html>
<head>
<title>easyui datagrid</title>

<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<script src="~/Scripts/jquery-easyui/jquery.easyui.min.js"></script>
<script src="~/Scripts/jquery-easyui/easyui-lang-zh_CN.js"></script>
<link href="~/Scripts/jquery-easyui/themes/bootstrap/easyui.css" rel="stylesheet" />
<link href="~/Scripts/jquery-easyui/themes/icon.css" rel="stylesheet" />


<script src="~/Scripts/jquery-easyui/custom/jquery.edatagrid.js"></script>

<script type="text/javascript">
var thisApp = {
init: function () {
$("#datagrid").edatagrid({
rownumbers: true,
singleSelect: true,
pagination: true,
idField: 'Id',
url: '@Url.Action("EdatagridList")',//这是数据加载的地址,返回对应的json数据包就行,json包格式例子,见下4
pageSize: 10,
pageList: [10, 50, 100],
saveUrl: '@Url.Action("SaveEdatagrid")', //新建,都是eadatagrid封装好的,把链接填好就行,点击之后会自动发送json数据包
updateUrl: '@Url.Action("SaveEdatagrid")', //保存
destroyUrl: '@Url.Action("DeleteEdatagrid")', //删除
onSave: function (index, row) {
var $datagrid = $('#datagrid');
if ($datagrid.data('isSave')) {
//如果需要刷新，保存完后刷新
$datagrid.edatagrid('reload');
$datagrid.removeData('isSave');
}
},
toolbar: [{
text: '增加',
iconCls: 'icon-add',
handler: function () {
$('#datagrid').edatagrid('addRow');
}
}, {
text: '保存',
iconCls: 'icon-cut',
handler: function () {
//标记需要刷新
$('#datagrid').data('isSave', true).edatagrid('saveRow');
}
}, '-', {
text: '删除',
iconCls: 'icon-save',
handler: function () {
$('#datagrid').edatagrid('destroyRow');
}
}]
});
}
}

$(function () {
thisApp.init();
})
</script>
</head>
<body>

<table id="datagrid">
<thead>
<tr>
<th data-options="field:'Code',width:80,align:'center'">员号</th>
<th data-options="field:'Name',width:100,align:'center',editor:'textbox'">姓名</th>
<th data-options="field:'Gender',width:80,align:'center',
formatter:function(value,row){
return row.Gender;
},
editor:{
type:'combobox',
options:{
valueField:'Gender',
textField:'text',
data:[{'text':'男','Gender':'男'},{'text':'女','Gender':'女'}],
required:true
}
}">性别</th>
<th data-options="field:'Age',width:60,align:'center',editor:{type:'numberbox',options:{precision:0}}">年龄</th>
<th data-options="field:'TimesheetHours',
width:80,align:'right',halign:'center',
formatter:function(value,row){
return row.TimesheetHours + 'H';
},editor:{type:'numberbox',options:{precision:0}}">工时合计</th>
</tr>
</thead>
</table>
</body>
</html>

4,json包格式例子(绿色为可填项)

{"total":30,"rows":

[{"Id":"b78e290b-69a2-4c72-8899-8676c01b504d","Name":"pm1","Age":20,"Code":1001,"Gender":"男","TimesheetHours":42},{"Id":"fe3fcad8-513a-409c-9fc8-682a7d169d1e","Name":"pm2","Age":20,"Code":1002,"Gender":"男","TimesheetHours":42},{"Id":"87f02f49-fa60-441d-a2ae-f6331e16c1ae","Name":"pm3","Age":20,"Code":1003,"Gender":"男","TimesheetHours":42},{"Id":"cf47a521-c6d5-4fda-ae80-07b5266a383d","Name":"pm4","Age":20,"Code":1004,"Gender":"男","TimesheetHours":42},{"Id":"29b81751-f800-43ed-8aa9-a9e37bd4486a","Name":"pm5","Age":20,"Code":1005,"Gender":"男","TimesheetHours":42},{"Id":"f22596ea-e7a9-4323-b76b-43a9ec073f27","Name":"pm6","Age":20,"Code":1006,"Gender":"男","TimesheetHours":42},{"Id":"251c2d4d-a7eb-4b76-90c7-b0aa6fff8475","Name":"pm7","Age":20,"Code":1007,"Gender":"男","TimesheetHours":42},{"Id":"d6621ed3-1d56-4c51-9316-6f299eb11572","Name":"pm8","Age":20,"Code":1008,"Gender":"男","TimesheetHours":42},{"Id":"f3db24c9-b643-4f67-a3ab-8e5da6f0542f","Name":"pm9","Age":20,"Code":1009,"Gender":"男","TimesheetHours":42},{"Id":"0fcf6ebe-c57c-4143-840a-8c15ee26fea1","Name":"pm10","Age":20,"Code":1010,"Gender":"男","TimesheetHours":42}]}

_Chris

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
3
评论
easyui的自动分页表格以及行编辑模式edatagrid

1,easyui 分享链接:http://pan.baidu.com/s/1sjwpbLr2,效果图2,代码实现 easyui datagrid var thisApp = { init: functi
复制链接

扫一扫

专栏目录