新增数据库表

1
key userid columns

扩展 datagrid 方法，拖动列的顺序并保存到数据库

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
$.extend($.fn.datagrid.methods, {
	columnMoving: function(jq, key){
		return jq.each(function(){
			var target = this;
			var cells = $(this).datagrid('getPanel').find('div.datagrid-header td[field]');
			cells.draggable({
				revert:true,
				cursor:'pointer',
				edge:5,
				proxy:function(source){
					var p = $('<div class="tree-node-proxy tree-dnd-no" style="position:absolute;border:1px solid #ff0000"/>').appendTo('body');
					p.html($(source).text());
					p.hide();
					return p;
				},
				onBeforeDrag:function(e){
					e.data.startLeft = $(this).offset().left;
					e.data.startTop = $(this).offset().top;
				},
				onStartDrag: function(){
					$(this).draggable('proxy').css({
						left:-10000,
						top:-10000
					});
				},
				onDrag:function(e){
					$(this).draggable('proxy').show().css({
						left:e.pageX+15,
						top:e.pageY+15
					});
					return false;
				}
			}).droppable({
				accept:'td[field]',
				onDragOver:function(e,source){
					$(source).draggable('proxy').removeClass('tree-dnd-no').addClass('tree-dnd-yes');
					$(this).css('border-left','1px solid #ff0000');
				},
				onDragLeave:function(e,source){
					$(source).draggable('proxy').removeClass('tree-dnd-yes').addClass('tree-dnd-no');
					$(this).css('border-left',0);
				},
				onDrop:function(e,source){
					$(this).css('border-left',0);
					var fromField = $(source).attr('field');
					var toField = $(this).attr('field');
					setTimeout(function(){
						swapField(fromField,toField);
						$(target).datagrid();
						$(target).datagrid('columnMoving');

						let opts = $(target).datagrid('getColumnFields');
						console.log(opts);
						let columns = opts.join(",");

						//记录到数据库中: key + userid + columns
						let userid = localStorage.getItem('userid');
					},0);
				}
			});

			// swap Field to another location
			function swapField(from,to){
				var columns = $(target).datagrid('options').columns;
				var cc = columns[0];
				_swap(from,to);
				function _swap(fromfiled,tofiled){
					var fromtemp;
					var totemp;
					var fromindex = 0;
					var toindex = 0;
					for(var i=0; i<cc.length; i++){
						if (cc[i].field == fromfiled){
							fromindex = i;
							fromtemp = cc[i];
						}
						if(cc[i].field == tofiled){
							toindex = i;
							totemp = cc[i];
						}
					}
					cc.splice(fromindex,1,totemp);
					cc.splice(toindex,1,fromtemp);
				}
			}
		});
	},
});

从数据库获取自定义列

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

/**
 * 根据全字段定义和 key 获取自定义列
 * @param columnsAll
 * @param key
 * @returns {[]}
 */
function getCurrentColumns(columnsAll, key) {
	function getItem(name) {
		for (let i = 0; i < columnsAll.length; i++) {
			let c = columnsAll[i];
			if(name == c.field) {
				return c;
			}
		}
	}

	//获取用户列字段：根据 key + userid
	let userid = localStorage.getItem("userid");
	
	//模拟获取到的列字段
	let columns = ["id", "loginname", "job", "mobile", "username", "rolename", "deptname", "address", "enabled"];
  
  	//获取不到，则返回原列定义
	if(columns.length == 0) {
		return columnsAll;
	}

	let currentColumns = [];
	for (let i = 0; i < columns.length; i++) {
		let name = columns[i];
		currentColumns.push(getItem(name));
	}

	return currentColumns;
}

使用

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
const COLUMNS_KEY = "user";
let columnsAll = [{
		field : 'id',
		title : '编号',
		width : 50,
		align: 'center',
		checkbox : true
	}, {
		field : 'loginname',
		title : '用户名',
		align: 'center',
		width : 60
	}, {
		field : 'username',
		title : '姓名',
		align: 'center',
		width : 120
	},{
		field : 'deptname',
		title : '所属机构/部门',
		align: 'center',
		width : 70
	}, {
		field : 'rolename',
		title : '角色',
		align: 'center',
		width : 70
	}, {
		field : 'job',
		title : '职位名称',
		align: 'center',
		width : 70
	}, {
		field : 'mobile',
		title : '手机号码',
		align: 'center',
		width : 80
	}, {
		field : 'address',
		title : '联系地址',
		align: 'center',
		width : 80
	}, {
		field : 'enabled',
		title : '用户状态',
		align: 'center',
		width : 80,
		formatter : function(value, row, index) {
			value = userEnabledMapJson[value];
			return value;
		}
	} ];

let currentColumns = getCurrentColumns(columnsAll, COLUMNS_KEY);

columns : [ currentColumns ],
onLoadSuccess : function() {
	$(this).datagrid('columnMoving', COLUMNS_KEY);
},