首先贴页面给大家看看效果
按照我封装的方式处理完就很简单了。
直接贴代码了
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <script type="text/javascript" src="${ctx}/static/fht_ams/public/bootstrap-table-object.js"></script> <script type="text/javascript" src="${ctx}/static/fht_ams/public/modalutils.js"></script> <div id="custom-toolbar" class="form-inline" style="line-height: 55px;"> <div class="layui-inline"> <div class="export btn-group"> <shiro:hasPermission name="companyProduct:create"> <button class="layui-btn" type="button" onclick="companyProduct.addCompanyProduct()">录入</button> </shiro:hasPermission> </div> </div> </div> <div id="tablecontainer"> <!--使用 search, showColumns, showRefresh, showToggle 属性来显示基本的工具栏。--> <table id="thisTable" data-height="210" data-toolbar="#custom-toolbar" data-showColumns="true" data-showRefresh="true" data-showExport="true"> <thead> <tr> <%-- <th data-field="vehicleId" data-align="center">未检索</th>--%> </tr> </thead> </table> </div> <script> <%--将后台数据保存--%> var url = '${url}'; //岗位实例 var companyProduct = { id: "thisTable", //表格id seItem: null, //选中的条目 table: null, layerIndex: -1 }; companyProduct.operateCompanyProduct = function (value , row) { var operatorHtml = '<div class="layui-table-cell laytable-cell-1-0-10">'; <shiro:hasPermission name="companyProduct:update"> operatorHtml += '<a class="layui-btn layui-btn-xs" title="修改公司产品" onclick="companyProduct.updateCompanyProduct(\''+row.id+'\')">修改</a>'; </shiro:hasPermission> <shiro:hasPermission name="companyProduct:delete"> operatorHtml += '<a class="layui-btn layui-btn-danger layui-btn-xs" title="删除公司产品" onclick="companyProduct.deleteCompanyProduct(\''+row.id+'\')">删除</a>'; </shiro:hasPermission> operatorHtml += '</div>'; return operatorHtml; }; </script> <%--设定js--%> <script src="${ctx}/static/fht_ams/${moduleCode}/${moduleCode}.js"></script> companyProduct.addCompanyProduct = function () { var modal = new modal_dialog( '/sys/companyProduct/authc_json/openCompanyProductPage' , 'add' , '新增公司产品信息' , ['确认提交'] , ['700px', '480px']); modal.init({ yes: function (index) { // 确定的代码逻辑 if (checkForm()){ $.ajax({ url: ctx + '/sys/companyProduct/authc_json/save', data:$('#companyProductForm').serializeArray() , dataType:'json', success:function (data) { if(data.resultCode == 0 ) { showSuccessMsgAtBottom(data.resultMessage) ; $('#thisTable').bootstrapTable("refresh"); layer.close(index) ; } else { showErrorMsgAtBottom(data.resultMessage) ; } } }); } } }); }; companyProduct.updateCompanyProduct = function (id) { var modal = new modal_dialog( '/sys/companyProduct/authc_json/openCompanyProductPage?id='+id , 'add' , '修改公司产品信息' , ['确认提交'] , ['700px', '480px']); modal.init({ yes: function (index) { // 确定的代码逻辑 if (checkForm()){ $.ajax({ url: ctx + '/sys/companyProduct/authc_json/update?id='+id, data:$('#companyProductForm').serializeArray() , dataType:'json', success:function (data) { if(data.resultCode == 0 ) { showSuccessMsgAtBottom(data.resultMessage) ; $('#thisTable').bootstrapTable("refresh"); layer.close(index) ; } else { showErrorMsgAtBottom(data.resultMessage) ; } } }); } } }); }; companyProduct.deleteCompanyProduct = function (id) { new modal_dialog('/sys/companyProduct/authc_json/delete?id='+id , 'delete' , '删除公司产品信息' ,['确定','取消']).init(); }; companyProduct.initColumn = function () { return [{field: '_index',title: "序号",align: "center",valign: "middle",sortable: "true",formatter: function (value, row, index) {return index + 1;}}, {field: "productName", title: "产品名称",align: "center",valign: "middle",sortable: "true"}, {field: "productPrice", title: "产品价格",align: "center",valign: "middle",sortable: "true"}, {field: "",title: "操作栏",align: "center",valign: "middle",sortable: "true",formatter:companyProduct.operateCompanyProduct} ] ; } ; companyProduct.getQueryParams_collectAll = function (params) { return { search : '' , likeSearch : $('#tablecontainer .search input').val(), offset: params.offset, limit: params.limit, order: 'desc', sort: 'id' }; } ; //初始化项目7 $(function () { //显示列表 var defaultColunms = companyProduct.initColumn(); var table = new BSTable(companyProduct.id, url, defaultColunms); table.setQueryParams(companyProduct.getQueryParams_collectAll); table.setSearch(false) ; table.init(); companyProduct.table = table ; });js 只需要指定列、分页的参数、以及初始化一下表格，列表数据会自动加载。你都不需要写其他多余的代码。
弹框也给你们封装好了，有新增的、修改的、删除的、只要按照我的模板套用就可以了，是不是很简单呢。如果有想要源码的私信我就行了
