1.bootstrap-table做的编辑页简单,不需要遍历数据,页面清晰。
<!DOCTYPE html> <html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"> <head> <th:block th:include="include :: header('参数表列表')"/> <style> .selects-table { width: 100%; background: #fff; border-radius: 6px; padding-bottom: 13px; box-shadow: 1px 1px 3px rgba(0,0,0,.2); padding-left: 15px; padding-right: 13px; } .buttons{ text-align: right; position:relative;right:50px;top:10px; } </style> </head> <body class="gray-bg"> <input th:value="${tenantId}" id="tenantid" type="hidden"/> <div class=" selects-table table-striped"> <table id="bootstrap-table" data-show-columns="false"></table> </div> <div class="buttons"> <input type="button" class="btn btn-primary" value="确定" οnclick="submit()"> <input type="button" class="btn btn-danger" value="取消" οnclick="clos()"> </div> <div th:include="include :: footer"></div> <script th:inline="javascript"> var noresize = true; var tenantid = $('#tenantid').val(); var _height = ($(window).height())-70; var prefix = ctx + "tenant/tenantParameters"; $(function () { var options = { id: "bootstrap-table", url: prefix + "/viewlist?tenantID=" + tenantid, updateUrl: prefix + "/edit/{id}", modalName: "多租户参数表", pageSize: [100,'ALL'], pagination: false, showRefresh:false, showExport: false, detailView:false, showToggle:false, showColumns:false, showSearch:false, height: _height, columns: [ { field: 'id', title: '参数id', visible: false }, { field: 'parameterCn', title: '参数疑义', sortable: false, width:400, }, { field: 'parameterName', title: '参数名', sortable: false, width:400, }, { field: 'value', title: '参数值', sortable: false, undefinedText:"", formatter: function (value, row, index) { return '<input class="idinput" type="hidden" value="'+row.id+'"/><input id="value" class="form-control datainput" type="text" value="' + value + '" />'; } }], }; $.table.init(options); }); var callback= function (result) { if (JSON.stringify(result.msg)=="操作成功"){ layer.closeAll(); //疯狂模式,关闭所有层 } } //修改参数 function submit() { var inputs= $('.datainput'); var idinput= $('.idinput'); var ids= new Array(); var value=new Array(); $.each(inputs,function (index,input){ value.push($(this).val()); }); $.each(idinput,function (index,input){ ids.push($(this).val()); }); $.operate.post(ctx+"tenant/tenantParameters"+ "/update", {"ids":ids,"value":value},callback); } function clos() { parent.closeParameter(); } </script> </body> </html>