bootStrap的x-editorTable小结和mybatis逆向工程

• 我将以下几个部分进行介绍bootstrap的这款表格控件：
• 1. 引用部分bootstrap的部分js文件

1 2 3 4 5 6 7 8 9 10

<script src="${ctx}plugins/bootstrap-table/bootstrap-table.min.js"></script> <%--添加空白行--%> <script src="${ctx}plugins/edittable/mindmup-editabletable.js"></script> <%--添加新行可编辑状态js--%> <script src="${ctx}plugins/bootstrap-table/extensions/editable3/js/bootstrap-editable.min.js"></script> <script src="${ctx}plugins/bootstrap-table/extensions/editable/bootstrap-table-editable.js"></script> <script src="${ctx}plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script> <script src="${ctx}plugins/bootstrap-table/extensions/fixed-columns/bootstrap-table-fixed-columns.js"></script> <%--bootstrap公共js--%>

• 1. 表格的初始化，通过一个回调函数创建表格：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204

//组合查询 var TableInit1 = function () { var oTableInit = new Object(); //初始化Table oTableInit.Init = function () { //绑定到table的标签上 $("#Table1").bootstrapTable({ //访问的接口 url : "${ctx}applicationProjectRelation/getGroupSigle", //方式 type : "GET", //数据格式 contentType: "application/json;charset=utf-8", pagination: true,//分页 striped: true,//是否显示行间隔色 cache:true, //是否使用缓存默认为true sortable:false, //是否启用排序 sortOrder:'asc', //排序方式 undefinedText:'', height:300, onlyInfoPagination:true, paginationDetailHAlign:"right" , sidePagination:'server', //分页方式：client客户端分页，server服务的分页 pageNumber: 1, //初始化加载第一页，默认第一页 pageSize: 10, //每页的记录行数 pageList: [5,10, 15, 20],//可供选择的每页的行数 search:false, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端 paginationPreText: "上一页", paginationNextText: "下一页", fixedColumns: false,//固定列 fixedNumber:4,//固定前两列 //点击当前行触发的事件 onClickRow: function (row) { $("#groupId").val(row.ZHXMID); $('#Table2').bootstrapTable('refresh'); }, responseHandler:function (res) { return res; }, queryParams:oTableInit.queryParams,//传递参数（*） //点击后checkbox会被选中，根据自己的需求是否需要 clickToSelect: true, columns: [{ filed:"Number", name:"行号", formatter:function (value,rows,index) { //通过index的值来进行数据的初始化，和另外的表格进行关联关系 if (index==0){ $("#groupId").val(rows.ZHXMID); // $('#Table2').bootstrapTable('refresh'); } return index+1; } }, { field: 'TXMQZ0', title: '前缀', formatter: function (value, row, index) { if (index ==0) { $("#toBarId").val(row.TXMQZ0); $('#Table3').bootstrapTable('refresh'); $('#Table4').bootstrapTable('refresh'); } return row.TXMQZ0; }, editable: { type: "text", separator:",", title: "前缀", //编辑框的标题 emptytext: "无数据", disabled: false, //是否禁用编辑 //对输入的数据进行校验，可以进行静态校验，主要是一些js函数校验，也可以通过ajax进行动态校验 validate: function (value,row,index) { if (!value) return '请输入前缀'; if (isNaN(value)) return '显示序号必须是数字'; var flag=""; $.ajax({ url:"${ctx}medicalTest/getBarCode", type:"post", data: {"id":value}, async:false, success: function (data) { if (data ==null||data.success==false){ flag = data.msg; } return; } }); return flag; } }, }, { //行内的文本编辑 field: 'XSXH00', title: '显示序号', editable: { type: "text", separator:",", title: "显示序号", //编辑框的标题 emptytext: "无数据", disabled: false, //是否禁用编辑 } }, //select的选择的编辑 { field: 'YYJY00', title: '用于检验', editable: { type: "select", separator:",", source: [{ value: '1', text: '有效' }, { value: '0', text: '无效' }], } }, //bootstrap和select2的融合，虽然都是bootstrap家族的但是兼容性不是特别的好，只能传递文本，而id无法获取到，主要是通过ajax获取东塔的数据，给它的source，通过点击，将文本回显到表格中，但是id无法对应到id上，当发起请求进行表格提交的时候，id数据无法提交到后台 { field: 'CJKSMC', title: '采集科室', editable: { type: 'select2', title: '采集科室', name : 'CJKSMC', source : function () {//动态获取数据 var result = []; $.ajax({ url : "${ctx}medicalTest/getDept", async : false, type : "get", success : function(data) { // console.log(data); $.each(data.data,function(i,item){ var obj = {}; obj.id =item.CJKSMC; obj.text = item.CJKSMC; result.push(obj); }); } }); return result; }, select2 : { //tags:true, allowClear : true, language: "zh-CN", placeholder: '请选择', width : '200px',//设置宽 id: function (item) { return item.id; } }, emptytext : "暂无" } }, ] }); } //得到查询的参数 oTableInit.queryParams = function (params) { // var dept=""; // if ($("#relevance").is(":checked")){ // dept = $("#choose").val(); // // } //主要是查询的条件的参数传递到后台 var temp = { //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的 //这个参数必须存在，主要后台使用的是mybatis的插件的pageHelper进行分页 offset: params.offset,//当前页面,默认是上面设置的1(pageNumber) limit: params.limit,//每一页的数据行数，默认是上面设置的10(pageSize) // is:$("#tcid00").val(), keywords:$("#keyword").val(), isVolid:$("#isValid").val(), // union:dept, // isuse:$("#isUse").val(), // departmentID:departmentID }; return temp; }; return oTableInit; }

• 页面初始化的加载这个表格

1 2	var table11= new TableInit11(); table1.Init();

• 表格标签的代码：我们使用data-formatter进行数据的转换加工，还有其他标签

1 2 3 4 5 6 7 8 9 10 11 12 13

<table class="table" id="Table5"> <thead> <tr> <th>选择</th> <th data-field="SFXMMC">申请项目名称</th> <th data-field="DCFSSM">带出方式</th> <th data-field="NX1" data-formatter="getbatch" data-events="batch">批量</th> <th data-field="DJ0000">单价</th> </tr> </thead> <tbody> </tbody> </table>

• 增加一个保存按钮

1 2 3 4 5 6 7 8

//编辑按钮 function operateFormatter(value, row, index) { return [ '<a class="edit" href="javascript:void(0)" title="保存" id="operatorItem">', '<i class="glyphicon glyphicon-floppy-save"></i>', '</a> ' ].join(''); }

• 给按钮绑定一个事件

1	<th data-field="operator" data-events="operater">操作</th>

• 绑定相应的方法，主要是一个回调函数

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53

//这个就是自己绑定一个点击事件，这个可以是按钮或者是checkbox ，operator是data-events的id，operatorItem是绑定按钮的id，一般使用formatter转换的时候就对他进行id的绑定 window.operater= { "click #operatorItem": function (e, value, rows, index) { var hmz={}; hmz.txmqz0=rows.TXMQZ0; hmz.txmmc0=rows.TXMMC0; hmz.xsxh00=rows.XSXH00; hmz.sjxsxh=rows.SJXSXH; hmz.yxbz00=rows.YXBZ00; hmz.txmysz=$(".color").eq(index).val().colorRgb(); hmz.yyjy00=rows.YYJY00; hmz.dyfs00=rows.DYFS00; hmz.dyybh0=rows.DYYBH0; hmz.mrcj00=rows.MRCJ00; hmz.sjsmts=rows.SJSMTS; hmz.smrqxg=rows.SMRQXG; hmz.keyworld=rows.SFXMMC; hmz.tsdymb=rows.TSDYMB; hmz.txmms0=rows.TXMMS0; hmz.txmcd0=rows.TXMCD0; hmz.djsfcj=rows.DJSFCJ; if ($("#insertflag").val()=='1'){ //新增 $.post( "${ctx}medicalTest/insertBarcodeType", hmz, function (data) { $("#insertflag").val()=='2' $("#Table2").bootstrapTable("refresh"); } ) }else{ hmz.yblxid=rows.YBLXID; //更新 $.post( "${ctx}medicalTest/updateBarcodeType", hmz, function (data) { $("#insertflag").val()=='2' $("#Table2").bootstrapTable("refresh"); } ) } } }

• 通过插入新增一行，最后通过bootstrap的append添加到行尾

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

$("#insert1").click(function (){ $("#insertflag").val("1"); var _data = { "TXMQZ0":"0", "TXMMC0":"条形码名称", "XSXH00":"显示序号", "SJXSXH":"送检序号", "YXBZ00":"0", "TXMYSZ":"0,0,0", "YYJY00":"0", "DYFS00":"0", "DYYBH0":"N", "MRCJ00":"0", "SJSMTS":"N", "SMRQXG":"0", "SFXMMC":"", "TSDYMB":"", "TXMMS0":"", "TXMCD0":"", "DJSFCJ":"0", } $("#Table").bootstrapTable('append', _data);//_data----->新增的数据 } );

• 通过上面添加的行列编辑属性，就可以对表格进行编辑，编辑完成，通过点击绑定的保存事件，获取正航的数据，传递到后台进行数据的保存
• 下面我来介绍一下后台页面，我这里使用的是pagehelper的插件，需要页面出传递参数limit和offset：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

/*** * 获取检查参数 * @param checkoutProgramDto * @return */ @RequestMapping("getCheckParameter") @ResponseBody public Map<Object,Object> getCheckParameter(CheckoutProgramDto checkoutProgramDto){ Map<Object,Object> map1 =new HashedMap(); //对pagehelper数据初始化 PageHelper.startPage(checkoutProgramDto.getOffset()/checkoutProgramDto.getLimit()+1,checkoutProgramDto.getLimit()); String isSet =checkoutProgramDto.getIsSet(); String keywords=checkoutProgramDto.getKeywords(); PtYgbm00 principal =(PtYgbm00) SecurityUtils.getSubject().getPrincipal(); String hospitolId=principal.getYybh00(); //后台获取数据 List<HashMap<Object, Object>> checkoutParam = checkoutProgramService.getCheckoutParam(isSet, keywords, hospitolId); //生成pageInfo对象 PageInfo<List<HashMap<Object, Object>>> pageInfo =new PageInfo(checkoutParam); //前端是rows和total map1.put("rows",pageInfo.getList()); map1.put("total",pageInfo.getTotal()); return map1; }

• 我的查询的思想主要是，获取文本框的值，当点击按钮的时候，我们就刷新当前表格，这样我们的条件就会获取到传递到后台，获取到相应的结果。
• 我在插入的时候使用的是mybatis 的orm框架，自动生成的，使用的时候，需要在实体类上添加@Id表示主键， @KeySql使用序列来生成主键，这个主要用在oracle上，而mysql主要使用的@generateID 直接可以生成主键

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

package org.physical.examination.model.systemManagement.professionalDictionary; import javax.persistence.*; import lombok.Data; import org.physical.examination.model.BaseEntity; import tk.mybatis.mapper.annotation.KeySql; import tk.mybatis.mapper.code.ORDER; @Data @Table(name = "TX_HM.HM_ZD_JYYBLX") public class HmZdJyyblx extends BaseEntity { @Id @Column(name = "YBLXID") @KeySql(sql = "select SQ_HM_ZD_JYYBLX_YBLXID.nextval from dual",order = ORDER.BEFORE) private Integer yblxid; }

• 在调用mybatis 自动生成的mapper来进行单表插入和更新的时候，他这里使用了通用的Mappertk.mybatis.mapper 通用mapper，来进行一般性的处理，一般调用的是insertSelective和updataPrinmarySelective进行更新，如果不是对数据库中的所有字段进行更新的时候，否则会报插入空指针的错误。

1 2	hmzdjyyblx.updateByPrimaryKeySelective(hmz); hmzdjyyblx.insertSelective(hm);

• 最近学到的也就这些，基本没有深入研究的后端框架，一直忙着搞前端框架，下一步打算学习一下shiro的安全框架，项目基本成熟，我只需要看懂来逐步深入了解。