Jquery EasyUI 开发实录
16lz
2021-01-22
有好几年没有用过EasyUI了,最近在外包做的一个项目中新增功能时,又用到了,本以为和按照以前那样用就可以了,可当我真正用的时候,发现许多地方不一样了,就连官网的文档都更新了,最突出的就是不知道什么时候起多了一个data-options属性。
记得,在过去一直都是用js直接调用的,现在突然变成data-options了,而官网给的Demo实在是太过简单,连url参数都是直接写死的,这肯定无法满足开发需求。没办法,只好先从官网过一下文档,然后慢慢摸索。因为浪费了我许多宝贵的时间,所以打算记录一下备忘用,也希望给大家参考。
站在使用者的角度而言,用这样的UI框架其实没什么技术含量,就是一边看文档,一边对着Demo改而已,要说难的地方,就是Demo不全,无法满足部分日常需求。
没有产品原型图,界面都是我意淫出来的,大家不要吐槽。
datagrid
需求:能够动态添加行、修改行、删除行、分页。
前台页面AddInvoice.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AddInvoice.aspx.cs" Inherits="YYZB.WebsiteAdmin.YYZB.PZSSettlement.AddInvoice" Title="结算单发票" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1" runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link href="/css/bootstrap.min.css" rel="stylesheet" /> <link href="/js/easyui/easyui.css" rel="stylesheet" /> <link href="../../js/easyui/icon.css" rel="stylesheet" /> <link href="/css/bootstrap-multiselect.css" rel="stylesheet" /> <style type="text/css"> .form-inline .form-control { display: inline-block; } label { text-align: right; cursor: pointer; font-weight: lighter; } span.red { padding-left: 5px; color: red; } .form-inline { padding: 5px 2px; } input.form-control { -webkit-box-shadow: none; box-shadow: none; } .glyphicon-stop:before { content: "\e074"; } #roletable { padding: 3%; font-size: 16px; } #roletable input[type="checkbox"] { margin-left: 20px; margin-right: 5px; } .newInput { width: 240px; display: inline-block; } .tdLeft { width: 80px; text-align: right; } .validatebox-text,.validatebox-invalid{height:20px;} </style> <!--引用脚本--> <script src="/js/jquery-1.8.3.min.js"></script> <script src="/js/bootstrap.min.js"></script> <script src="/js/easyui/jquery.easyui.min.js"></script> <script src="../../js/easyui/easyui-lang-zh_CN.js"></script> <script src="/js/jquery.datagrid.js"></script> <script src="/js/knockout/knockout-2.1.0.js"></script> <script src="/js/bootstrap-multiselect.js"></script> <script type="text/javascript"> function GetQueryString(name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); var r = window.location.search.substr(1).match(reg); if (r != null) return unescape(r[2]); return ""; } var _id; $(function () { _id = GetQueryString("id"); parent.$("#bootstrapDialog .modal-footer").find("button").eq(1).hide(); loaddatagrid(); }); var datagrid; //定义全局变量datagrid function loaddatagrid() { datagrid = $('#table').datagrid({ url: encodeURI("/YYZB/Tools/SettlementApi.aspx?action=GetInvoiceListBySetId&id=" + _id + "&pageindex=" + _pageindex + "&pagesize=" + _pagesize + "&" + Math.random()), columns: [[ { field: 'Id', checkbox: true, width: 50, sortable: false }, { field: 'InvoiceNo', title: '发票号', width: 160, sortable: true, editor: { type: 'validatebox', options: { required: true} } }, { field: 'Remark', title: '备注', width: 240, sortable: true, editor: { type: 'validatebox' } } ]], toolbar: [{ iconCls: 'icon-add', text: '添加', handler: function () { append() } }, '-', { iconCls: 'icon-remove', text: '删除', handler: function () { removeit() } }, '-', { iconCls: 'icon-save', text: '保存', handler: function () { accept() } }, '-', { text: '修改', iconCls: 'icon-edit', handler: function () { edit(); } } , '-', { text: '取消编辑', iconCls: 'icon-redo', handler: function () { //取消当前编辑行把当前编辑行罢undefined回滚改变的数据,取消选择的行 cancleEdit(); } }, '-'], onReload: function () { reload(); }, onAfterEdit: function (rowIndex, rowData, changes) { //endEdit该方法触发此事件 saveChange(rowData); editRow = undefined; }, onDblClickRow: function (rowIndex, rowData) { //双击开启编辑行 if (editRow != undefined) { datagrid.datagrid("endEdit", editRow); } if (editRow == undefined) { datagrid.datagrid("beginEdit", rowIndex); editRow = rowIndex; } }, iconCls: 'icon-edit', singleSelect: true, pagination: true, //在 datagrid 的底部显示分页栏。 rownumbers: true, //显示行号的列 remoteSort: false //定义是否从服务器给数据排序。 }); } var editRow = undefined; //定义全局变量:当前编辑的行 function edit() { //修改时要获取选择到的行 var rows = datagrid.datagrid("getSelections"); //如果只选择了一行则可以进行修改,否则不操作 if (rows.length == 1) { //修改之前先关闭已经开启的编辑行,当调用endEdit该方法时会触发onAfterEdit事件 if (editRow != undefined) { datagrid.datagrid("endEdit", editRow); } //当无编辑行时 if (editRow == undefined) { //获取到当前选择行的下标 var index = datagrid.datagrid("getRowIndex", rows[0]); //开启编辑 datagrid.datagrid("beginEdit", index); //把当前开启编辑的行赋值给全局变量editRow editRow = index; //当开启了当前选择行的编辑状态之后, //应该取消当前列表的所有选择行,要不然双击之后无法再选择其他行进行编辑 datagrid.datagrid("unselectAll"); } } } function cancleEdit() { editRow = undefined; datagrid.datagrid("rejectChanges"); datagrid.datagrid("unselectAll"); } function append() { //添加时先判断是否有开启编辑的行,如果有则把开户编辑的那行结束编辑 if (editRow != undefined) { datagrid.datagrid("endEdit", editRow); } //添加时如果没有正在编辑的行,则在datagrid的第一行插入一行 if (editRow == undefined) { datagrid.datagrid("insertRow", { index: 0, // index start with 0 row: { } }); //将新插入的那一行开户编辑状态 datagrid.datagrid("beginEdit", 0); //给当前编辑的行赋值 editRow = 0; } } function removeit() { //删除时先获取选择行 var rows = datagrid.datagrid("getSelections"); //选择要删除的行 if (rows.length > 0) { var editIndex = $('#table').datagrid('getRows').length - 1; parent.$.fn.Confirm({ message: "确定要删除吗?", callback: function () { var ids = []; for (var i = 0; i < rows.length; i++) { ids.push(rows[i].Id); } //将选择到的行存入数组并用,分隔转换成字符串 $.post("/YYZB/Tools/SettlementApi.aspx?action=RemoveInvoiceByIds", { ids: ids.join(','), SettlementId: _id }, function (data) { var Json = eval('(' + data + ')'); if (Json.ok) { //$('#table').datagrid('deleteRow', editIndex); $("#table").datagrid('reload'); parent.$("#table").datagrid('reload'); //parent.$.fn.Alert({ // message: "删除成功!", // timer: 0, // callback: function () { // parent.$("#table").datagrid('reload'); // $("#table").datagrid('reload'); // //parent.$("#bootstrapDialog").modal("hide"); // } //}); } else { parent.$.fn.Alert({ message: "删除失败:" + Json.error, callback: function () { } }); } }) } }); } else { $.fn.Alert({ message: "请选择删除项!" }); } } function accept() { //保存时结束当前编辑的行,自动触发onAfterEdit事件如果要与后台交互可将数据通过Ajax提交后台 datagrid.datagrid("endEdit", editRow); } function saveChange(rowData) { var url = encodeURI("/YYZB/Tools/SettlementApi.aspx?action=InsertOrUpdateInvoice"); var msg = (rowData.Id == undefined || rowData.Id == "") ? "添加" : "修改"; $.post(url, { id: rowData.Id, InvoiceNo: rowData.InvoiceNo, Remark: rowData.Remark,SettlementId:_id }, function (data) { var Json = eval('(' + data + ')'); if (Json.ok) { parent.$("#table").datagrid('reload'); //parent.$.fn.Alert({ // message: msg+"成功!", // timer: 0, // callback: function () { // parent.$("#table").datagrid('reload'); // //parent.$("#bootstrapDialog").modal("hide"); // } //}); } else { parent.$.fn.Alert({ message: msg+"失败:" + Json.error, callback: function () { $("#table").datagrid('reload'); cancleEdit(); } }); } }); } </script> </head> <body> <form id="form1" runat="server"> <div class="tab-content"> <table id="table" class="table table-striped table-bordered table-hover" title="已录入发票列表" style="width: 540px;"></table> <div> <input type="hidden" id="addInvoice" /> </div> </div> </form> </body> </html>
更多相关文章
- 开发学习Jquery实例---双击表格弹出模态对话框,编辑提交数据
- 通过ajax POST提交nicEdit文本编辑器的值,不起作用
- 推荐web 前端代码的编辑分享平台——RunJS
- 可编辑的表格:jQuery+PHP实现实时编辑表格字段内容
- 从零搭建个人博客(3)-如何在webpack环境下配置jquery和富文本编
- jQuery图片热点链接添加编辑插件
- Web App可以在不刷新页面的情况下最好地添加,删除和编辑行
- 15个基于WEB的HTML编辑器
- 如何使html页面中的文本变为可编辑的?