widget.js
4.98 KB
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
(function () {
Vue.prototype.$echarts = echarts;
Vue.prototype.$layui = layui;
let vm = new Vue({
el: '#app',
data() {
return {
zbjsmx: ['全部', '基础指标', '推荐指标'],
table: null,
layer: null,
laytpl: null
}
},
mounted() {
this.$layui.use(['table', 'layer', 'laytpl', 'form'], () => {
this.table = this.$layui.table;
this.layer = this.$layui.layer;
this.laytpl = this.$layui.laytpl;
this.form = this.$layui.form;
this.initTable();
})
},
methods: {
initTable() {
this.table.render({
elem: '#mxlbTable',
data: [
{ "id": '1', "xh": '1', "sjymc": '地类图斑数据', "sjylx": '空间数据', "sjybsf": '空间分析', "fz": '土地利用', "sjyms": '数据说明、来源等', "cz": '操作' },
{ "id": '2', "xh": '2', "sjymc": '行政区数据', "sjylx": '空间数据', "sjybsf": '空间分析', "fz": '现状数据', "sjyms": '数据说明、来源等', "cz": '操作' },
{ "id": '3', "xh": '3', "sjymc": '年度GDP', "sjylx": '录入指标', "sjybsf": '空间分析', "fz": '经济', "sjyms": '数据说明、来源等', "cz": '操作' },
{ "id": '4', "xh": '4', "sjymc": '万人', "sjylx": '常量数值', "sjybsf": '空间分析', "fz": '土地利用', "sjyms": '数据说明、来源等', "cz": '操作' },
{ "id": '5', "xh": '5', "sjymc": '某某表格', "sjylx": '表格', "sjybsf": '空间分析', "fz": '现状', "sjyms": '数据说明、来源等', "cz": '操作' }
],
cellMinWidth: 80,//全局定义常规单元格的最小宽度，layui 2.2.1 新增
cols: [[
{
field: 'xh',
width: "10%",
title: '序号'
},
{
field: 'sjymc',
width: "15%",
title: '数据源名称'
},
{
field: 'sjylx',
width: "15%",
title: '数据源类型'
},
{
field: 'sjybsf',
width: "15%",
title: '数据源标识符',
},
{
field: 'fz',
title: '分组',
width: "15%"
},
{
field: 'sjyms',
title: '数据源描述',
width: "15%"
},
{
field: 'cz',
title: '操作',
width: "15%",
templet: '#titleTpl'
},
]],
done: (res, curr, count) => {
this.table.on('tool(test)', function (obj) {
var data = obj.data; //获得当前行数据
var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
if (layEvent === 'edit') { //编辑
//同步更新缓存对应的值
obj.update({
username: '123'
, title: 'xxx'
});
} else if (layEvent === 'del') { //删除
layer.confirm('真的删除行么', function (index) {
obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
layer.close(index);
//向服务端发送删除指令
});
}
});
},
});
},
regModel() {
layui.layer.open({
type: 1,
title: "添加数据源",
area: ['474px', '56%'],
content: layui.laytpl($("#iFrame_addModel").html()).render(function () {
$('#iFrame_addMod').html()
}),
btn: ['确定', '取消']
});
}
}
});
})()