表格展示利器 Bootstrap Table实例代码(2)

var _dont_edit_formatter = false; if (column.editable.hasOwnProperty('noeditFormatter')) { var process = column.editable.noeditFormatter(value, row, index); if(!process.hasOwnProperty('class')){ process.class = ''; } if(!process.hasOwnProperty('style')){ process.style = 'color:#000;text-decoration:none;'; } _dont_edit_formatter = ['<a href="javascript:void(0)" ', ' data-name="'+process.filed+'"', ' data-pk="' + row[that.options.idField] + '"', ' data-value="' + process.value + '"', '', '>' + process.value + '</a>' ].join(''); } if (_dont_edit_formatter === false) { return ['<a href="javascript:void(0)" ', ' data-name="' + column.field + '"', ' data-pk="' + row[that.options.idField] + '"', ' data-value="' + result + '"', editableDataMarkup.join(''), '>' + value + '</a>' ].join(''); } else { return _dont_edit_formatter; }

前端页面调用时,参考代码如下:

loadCharts: function () { var me = this; var tb_departments = me.getCmp("overtimeTable").bootstrapTable({ method: 'post', //请求方式(*) height: MP.Const.dataGridHeight, toolbar: '#checkovertimeinfo_toolbar', //工具按钮用哪个容器 striped: true, //是否显示行间隔色 cache: false, //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*) pagination: true, //是否显示分页(*) sortable: true, //是否启用排序 sortOrder: "asc", //排序方式 sidePagination: "server", //分页方式:client客户端分页,server服务端分页(*) pageNumber: 1, //初始化加载第一页,默认第一页 pageSize: 20, //每页的记录行数(*) pageList: [10, 20, 25, 30], //可供选择的每页的行数(*) //search: true, //是否显示表格搜索,此搜索是客户端搜索,不会进服务端,所以,个人感觉意义不大 strictSearch: true, singleSelect:false, showColumns: true, //是否显示所有的列 showToggle:true, //是否显示详细视图和列表视图的切换按钮 //showRefresh: false, //是否显示刷新按钮 minimumCountColumns: 1, //最少允许的列数 //clickToSelect: true, //是否启用点击选中行 cardView: false, //是否显示详细视图 detailView: false, //是否显示父子表 showHeader: true, onEditableSave: function (field, row, oldValue, $el) { //单行数据修改后,保存到后台 var param={}; var listUuid=[]; listUuid[0]=row.uuid; param.listUuid=listUuid; param.overTimeStatus=row.overTimeStatus; MP.doAction("sccq-overtime-update", param, function(data) { if(data.success) { MP.Msg.info('审核操作完成'); } me.ajaxGetData(); },null, true, true); }, columns: [ { title: "全选", field: "select", checkbox: true, align: "left",//水平居中 halign: "left",//垂直居中 }, { field: "uuid", align: 'center', title: "个人分析", formatter: function (value) { var html = "<a>" + "<span><span></span><span>查看</span></span></a>&nbsp;"; return html; } }, { align: "left",//水平居中 halign: "left",//垂直居中 field: "createByDesc", title: "加班人" },{ align: "left", halign: "left", field: "overTimeDate", sortable:true, title: "加班日期", formatter: function (value) { return MP.dateFormatter(value); } }, { align: "left", halign: "left", field: "beginTime", title: "加班开始时间" }, { align: "left", halign: "left", field: "endTime", title: "加班结束时间" }, { align: "left", halign: "left", field: "overTimeHour", sortable:true, title: "加班小时" }, { align: "left", halign: "left", field: "overTimeStatus", title: "审核状态", editable: { type: 'select', title: "审核状态", pk: 1, source: [ {value: 2, text: '审核通过'}, {value: 3, text: '驳回'} ], noeditFormatter: function (value,row,index) { var result; if (value == '1' || value == '待审核') { result={filed:"overTimeStatus",value:"待审核",class:"badge bg-orange",style:"padding:5px 10px;"}; } else if (value == '2' || value == '审核通过'){ result={filed:"overTimeStatus",value:"审核通过",class:"badge bg-green",style:"padding:5px 10px;"}; } else if (value == '3' || value == '驳回'){ result={filed:"overTimeStatus",value:"驳回",class:"badge bg-red",style:"padding:5px 10px;"}; } return result; } } }, { align: "left", halign: "left", field: "projectNameDesc", sortable:true, title: "所属项目" }, { align: "left", halign: "left", field: "overTimeAddressDesc", sortable:true, title: "加班地点" }, { align: "left", halign: "left", field: "eatMoney", sortable:true, title: "加班餐费" }, { align: "left", halign: "left", field: "taxiMoney", sortable:true, title: "加班车费" }, { align: "left", halign: "left", field: "overTimeRemark", title: "备注" } ], onPageChange:function(number, size) { //设置在分页事件触发时,传递分页参数给后台,重新加载数据 me.queryBaseParam.limit=size; me.queryBaseParam.start=number; me.ajaxGetData(); }, onSort: function (name, order) { me.queryBaseParam.sort=name; me.queryBaseParam.order=order; me.ajaxGetData(); }, onClickRow: function (row, $elepment, field) { if (field == 'uuid') { //alert("查看页面"); var params={}; params.createBy=row.createBy; params.createByDesc=row.createByDesc; me.controller.showOvertimeSingleDetail(params); } } }); }, ajaxGetData: function () { //加载后台数据 var me=this; var params=MP.getFormData("searchOverTimeForm_person",this.controller); params.QueryType=1; params.limit= me.queryBaseParam.limit; params.start= me.queryBaseParam.start; params.sort= me.queryBaseParam.sort; params.order= me.queryBaseParam.order; MP.doAction("sccq-overtime-query", params, function (datas) { if (datas.success) { me.getCmp("overtimeTable").bootstrapTable('load', datas); } }, function (datas) { alert("数据加载失败"); }, true, true); }

总结

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wygdgz.html