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


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

你可能感兴趣的:(jqueryeasyui)