layui table 表头合并_layui 动态表格table+复杂表头+合并单元格

1

2

3

4

5

复杂表头+select下拉框默认值+单元格合并

6

7

8 /*select下拉框显示*/

9 td[data-field="qualityStatus"]>div {

10 overflow: inherit;

11 }

12 /*去除行点击、hover背景色*/

13 .layui-table tbody tr:hover , .layui-table-hover , .layui-table-click{

14 background-color: rgba(255,255,255,0);

15 }

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32 layui.use(['element','upload','laydate','table','form'], function(){

33 var element = layui.element

34 ,table = layui.table,

35 laypage = layui.laypage,

36 form = layui.form,

37 upload = layui.upload,

38 laydate = layui.laydate;

39 //模拟数据

40 var selectdata = [

41 {

42 amountOfMoney: 5000,

43 basicMeasurement: "kg",

44 certificateNumber: "内容15",

45 concession: null,

46 contentId: null,

47 disqualification: null,

48 explains: "内容67",

49 files: null,

50 id: 2,

51 inspectContent: "内容22",

52 inspectContentNumber: "内容0000",

53 inspector: null,

54 inspectorDate: null,

55 inspectorDescription: null,

56 isNumber: null,

57 main: null,

58 manufacturer: "内容44",

59 materialId: 14,

60 materialName: "内容4",

61 materialNo: "内容一",

62 materialSize: "2*3",

63 meId: null,

64 orderAmount: 100,

65 orderId: 1,

66 orderPrice: 20,

67 orderedInAmount: 0,

68 projectName: "其他",

69 purchaseMeasurement: "kg",

70 qualified: null,

71 qualityStatus: null,

72 qualityTestedInAmount: 9,

73 standard: "内容11",

74 undetectedCount: 91,

75 },

76 {

77 amountOfMoney: 5000,

78 basicMeasurement: "kg",

79 certificateNumber: "内容14",

80 concession: null,

81 contentId: null,

82 disqualification: null,

83 explains: "内容66",

84 files: null,

85 id: 2,

86 inspectContent: "内容33",

87 inspectContentNumber: "内容1111",

88 inspector: null,

89 inspectorDate: null,

90 inspectorDescription: null,

91 isNumber: null,

92 main: null,

93 manufacturer: "内容44",

94 materialId: 14,

95 materialName: "内容4",

96 materialNo: "内容一",

97 materialSize: "2*3",

98 meId: null,

99 orderAmount: 100,

100 orderId: 1,

101 orderPrice: 20,

102 orderedInAmount: 0,

103 projectName: "其他",

104 purchaseMeasurement: "kg",

105 qualified: null,

106 qualityStatus: null,

107 qualityTestedInAmount: 9,

108 standard: "内容001",

109 undetectedCount: 91,

110 },

111 {

112 amountOfMoney: 5000,

113 basicMeasurement: "kg",

114 certificateNumber: "内容15",

115 concession: null,

116 contentId: null,

117 disqualification: null,

118 explains: "内容67",

119 files: null,

120 id: 1,

121 inspectContent: "内容22",

122 inspectContentNumber: "内容0000",

123 inspector: null,

124 inspectorDate: null,

125 inspectorDescription: null,

126 isNumber: null,

127 main: null,

128 manufacturer: "内容45",

129 materialId: 13,

130 materialName: "内容3",

131 materialNo: "内容二",

132 materialSize: "2*3",

133 meId: null,

134 orderAmount: 100,

135 orderId: 1,

136 orderPrice: 20,

137 orderedInAmount: 0,

138 projectName: "其他",

139 purchaseMeasurement: "kg",

140 qualified: null,

141 qualityStatus: null,

142 qualityTestedInAmount: 12,

143 standard: "内容11",

144 undetectedCount: 88,

145 },

146 {

147 amountOfMoney: 5000,

148 basicMeasurement: "kg",

149 certificateNumber: "内容14",

150 concession: null,

151 contentId: null,

152 disqualification: null,

153 explains: "内容66",

154 files: null,

155 id: 1,

156 inspectContent: "内容33",

157 inspectContentNumber: "内容1111",

158 inspector: null,

159 inspectorDate: null,

160 inspectorDescription: null,

161 isNumber: null,

162 main: null,

163 manufacturer: "内容45",

164 materialId: 13,

165 materialName: "内容3",

166 materialNo: "内容二",

167 materialSize: "2*3",

168 meId: null,

169 orderAmount: 100,

170 orderId: 1,

171 orderPrice: 20,

172 orderedInAmount: 0,

173 projectName: "其他",

174 purchaseMeasurement: "kg",

175 qualified: null,

176 qualityStatus: null,

177 qualityTestedInAmount: 12,

178 standard: "内容001",

179 undetectedCount: 88,

180 }

181 ]

182

183 //主页面数据

184 table.render({

185 elem: '#qua_standard_table',

186 id:'qua_standard_table',

187 //url:'',

188 data:selectdata,

189 method:'POST',

190 title: '数据表',

191 height: 'full-60',

192 cellMinWidth: 120,

193 size: 'lg',

194 cols:[[

195 {align:'center',rowspan:2, title:'序号',width:100,type:'numbers',field: 'num',fixed:'left'},

196 {align:'center',rowspan:2,field: 'id', title: 'ID',hide:true},//隐藏列

197 {align:'center',rowspan:2,field:'materialNo', title:'表头',width:100},

198 {align:'center',rowspan:2,field:'materialName', title:'表头'},

199 {align:'center',rowspan:2,field:'projectName', title:'表头'},

200 {align:'center',rowspan:2,field:'purchaseMeasurement', title:'表头'},

201 {align:'center',rowspan:2,field:'inspectContentNumber', title:'表头'},

202 {align:'center',rowspan:2,field:'inspectContent', title:'表头'},

203 {align:'center',rowspan:2,field:'standard', title:'表头'},

204 {align:'center',rowspan:2,field:'explains', title:'表头'},

205 {align:'center',rowspan:2,field:'qualityStatus', title:'结果',templet: function (d) {

206 if(d.qualityStatus == null){

207 return '' +

208 ' 合格' +

209 ' 不合格' +

210 ' ';

211 }

212

213 }},

214 {align:'center',rowspan:2,field:'certificateNumber', title:'表头',templet: function (d) {

215 if(d.certificateNumber==null || d.certificateNumber==''){

216 return '无'

217 }else{

218 return d.certificateNumber

219 }

220 }},

221 {align:'center',rowspan:2,field:'undetectedCount', title:'表头'},

222 {align:'center',field:'resultNum', title:'表头',colspan:3},

223 {align:'center',rowspan:2,field:'qualityTestedInAmount', title:'表头'},

224 {align:'center',rowspan:2,field:'manufacturer', title:'表头'},

225 {align:'center',rowspan:2,field:'certificate', title:'表头', templet: function (d) {

226 return '' +

227 '添加附件' +

228 '';

229 },fixed:'right'},

230 {align:'center',rowspan:2,width:100,field: 'operation', title: '操作', templet: function (d) {

231 return '' +

232 '删除' +

233 '';

234 },fixed:'right'}

235 ],

236 [

237 {align:'center',field:'qualified', title:'表头', edit: 'number'},

238 {align:'center',field:'disqualification', title:'表头', edit: 'number'},

239 {align:'center',field:'concession', title:'表头', edit: 'number'},

240 ]

241 ],

242 done: function (res, curr, count) {

243 element.init();

244 $('#qua_standard_table').siblings('div').find('dl').find('.layui-this').click();//模拟点击 初始化数据

245 merge(res);//合并单元格

246 }

247 });

248

249 $('#receiptForm1').on('keyup','.layui-table-edit',function () {

250 this.value=this.value.replace(/^(0+)|[^\d]+/g,'')//TODO

251 });

252

253 //行事件

254 table.on('tool(qua_standard_table)', function(obj){

255

256 if(obj.event === 'qua_standard_edit'){

257 layer.msg('添加')

258 }else if(obj.event === 'qua_standard_del'){

259 layer.msg('删除')

260 }

261 });

262

263 });

264 //layui 结束

265

266 //合并开始

267 function merge(res) {

268 var data = res.data;

269 var mergeIndex = 0;//定位需要添加合并属性的行数

270 var mark = 1; //这里涉及到简单的运算,mark是计算每次需要合并的格子数

271 var _number = 1;//保持序号列数字递增

272 var columsName = ['num','number','typeName','projectName','unit','suppliedNum','qualified','disqualification','concession','sum','manufacturer','certificate','operation'];//需要合并的列名称

273 var columsIndex = [0,2,3,4,5,12,13,14,15,16,17,18,19];//需要合并的列索引值

274 var mergeCondition = 'id';//需要合并的 首要条件 在这个前提下进行内容相同的合并

275 var tdArrL = $('.layui-table-fixed-l > .layui-table-body').find("tr");//序号列左定位产生的table tr

276 var tdArrR = $('.layui-table-fixed-r > .layui-table-body').find("tr");//操作列定右位产生的table tr

277

278 for (var k = 0; k < columsName.length; k++) { //这里循环所有要合并的列

279 var trArr = $(".layui-table-main>.layui-table").find("tr");//所有行

280 for (var i = 1; i < res.data.length; i++) { //这里循环表格当前的数据

281

282 if (data[i][mergeCondition] === data[i-1][mergeCondition]) {

283 var tdCurArr = trArr.eq(i).find("td").eq(columsIndex[k]);//获取当前行的当前列

284 var tdPreArr = trArr.eq(mergeIndex).find("td").eq(columsIndex[k]);//获取相同列的第一列

285

286 if (data[i][columsName[k]] === data[i-1][columsName[k]]) { //后一行的值与前一行的值做比较,相同就需要合并

287 mark += 1;

288 tdPreArr.each(function () {//相同列的第一列增加rowspan属性

289 $(this).attr("rowspan", mark);

290 });

291 tdCurArr.each(function () {//当前行隐藏

292 $(this).css("display", "none");

293 });

294 }else {

295 mergeIndex = i;

296 mark = 1;//一旦前后两行的值不一样了,那么需要合并的格子数mark就需要重新计算

297 }

298 } else {

299 mergeIndex = i;

300 mark = 1;//一旦前后两行的值不一样了,那么需要合并的格子数mark就需要重新计算

301 }

302

303

304 }

305 mergeIndex = 0;

306 mark = 1;

307 }

308

309

310

311

312

313 //操作左右定位列的表格

314 $.each($("#qua_standard_table").siblings('.layui-table-view').find('.layui-table-main>.layui-table').find("tr"),function (i,v) {

315 if ($(v).find('td').eq(2).css('display') === 'none') {

316 tdArrL.eq(i).find('td').css('display','none');

317 tdArrR.eq(i).find('td').css('display','none');

318 } else {

319 tdArrL.eq(i).find('td').find('.laytable-cell-numbers').html(_number++);

320 tdArrL.eq(i).find('td').css('height',$(v).find('td').eq(2)[0].clientHeight);

321 tdArrR.eq(i).find('td').css('height',$(v).find('td').eq(2)[0].clientHeight);

322

323 }

324 })

325

326

327

328 }

329 //合并结束

330

331

表情包
插入表情
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
相关推荐
©️2020 CSDN 皮肤主题: 1024 设计师:白松林 返回首页