jqueryEasyUI实现datagrid column自定义显示顺序

项目要求实现一个可以自定义的datagrid column的功能，查看了资料发现目前jqueryeasyui暂时没有这个功能。
在了解需求后，自己想了方法

   首先用户可以选择一些列（定义好的）
   把这些列按照顺序保存起来
   界面初始化的时候可以显示这里列。（按照保存的顺序）

思路理清楚后，开始设计
首先新增一张表格（可以简单一点）CURD功能要有

    CREATE TABLE `user_choose_column` (
      `id` int(11) NOT NULL AUTO_INCREMENT,
      `usercode` varchar(50) NOT NULL,
      `chooseColumn` varchar(500) NOT NULL,
      PRIMARY KEY (`id`)
    ) ENGINE=InnoDB DEFAULT CHARSET=utf8;

界面初始化的js调用方法，这里因为要实现顺序，所以前端的js需要增加一个对象，保存可以选择列，用于排序
//初始化一个column的数组，需求要求能够进行排序

var colArr = {};
function initColumnArray() {
	colArr.status = JSON.parse('{"field":"statusName","title":"状态","width":10,"align":"center"}'),
	colArr.startu = JSON.parse('{"field":"startu","title":"起始U位","width":5,"align":"center"}'),
	colArr.fullClass = JSON.parse('{"field":"fullClass","title":"资产分类","width":15,"align":"center","formatter":"fullclassFormatter"}');//,"formatter":fullclassFormatter}
	colArr.brandName = JSON.parse('{"field":"brandName","title":"品牌","width":8,"align":"center"}');
	colArr.seriesName = JSON.parse('{"field":"seriesName","title":"系列","width":8,"align":"center"}');
	colArr.modelName = JSON.parse('{"field":"modelName","title":"型号","width":8,"align":"center"}');
	colArr.ostype = JSON.parse('{"field":"ostype","title":"操作系统","width":8,"align":"center"}');
	colArr.osversion = JSON.parse('{"field":"osversion","title":"操作系统版本","width":10,"align":"center"}');
}

//自定义列
function nullFormatOSType(val,rec) {
	if (rec.ostype == '0') {
		return "";
	}
	return rec.ostype;
}
function defColumn(column) {
	//将之前选中的checkbox标记清除
	$('#XXX').datagrid('clearChecked');
	var initCol = column.split(",");
	
	var col = [];
	col.push(JSON.parse('{"field":"id","title":"","hidden":true }'));
	col.push(JSON.parse('{"field":"check", "title": "", "align": "center", "width":10,"checkbox":true}'));
	for (var i=0; i<initCol.length; i++) {
		if (initCol[i] == 'ostype') {//如果某一列需要使用formatter，需要单独提出来。
			col.push({"field":"ostype","title":"操作系统","width":8,"align":"center",formatter:nullFormatOSType});
		} else {
			col.push(colArr[initCol[i]]);//实现排序
		}
	}
	col.push({"field":"opt","title":"操作","width":10,"align":"center",formatter:optFormatter});//,/* "formatter":"fullclassFormatter" */
	
	$('#XXX').datagrid({
		columns:[col]
	});
	$(window).resize(function(){
		$('#XXX').datagrid('resize');
	});//监听浏览器宽度变化
}

按照上面的demo完成代码，可以实现根据用户自定义的顺序，显示datagrid的列

jqueryEasyUI实现datagrid column自定义显示顺序

猜你喜欢