`
happyqing
  • 浏览: 3200877 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

jquery easyui dataGrid动态改变排序字段名,排序列名不一致

阅读更多

 

如果属性名是propertyName,而列名是property_name,那么排序会报错,

jquery jqGrid是能指定排序列名的,而easyui的dataGrid没有,

 

需要做列名转换,

 

一、前台通过js转换

优点:高效,好编辑,省服务器资源。

缺点:暴露列名,(不过一般内网系统,这个可接受)

 

加载前做排序转换

dataGrid指定

sortName:'propertyName',

sortOrder:'asc',

multiSort:true,

onBeforeLoad:dgOnBeforeLoad

 

 

//排序转换map
var sortMap = {};
sortMap['propertyName']='property_name';

//排序转换
//dataGrig的onBeforeLoad事件引用
function dgOnBeforeLoad(param){
	if(param.sort){	//另一个参数:param.order
		var sortResult = "";
		var sorts = param.sort.split(",");
		var sort;
		for(var i=0; i<sorts.length; i++){
			sort = sorts[i].trim();
			if(sortMap && sortMap[sort]){
				sortResult += sortMap[sort];
			} else {
				sortResult += sort;
			}
			sortResult += ",";
		}
	}
	if(sortResult.length>0){
		sortResult = sortResult.substring(0,sortResult.length-1);
	}
	param.sort = sortResult;
}
 

 

 

sortName写属性名,而不是列名,这样就不会出现,在dataGrid中看不出按哪列排序的问题

 

复杂的方法,一般不用配置sortMap

//排序转换
function dgOnBeforeLoad(param){
	if(param.sort){
		param.sort=sortConvert(param.sort,null,null,true);
	}
}

/**
 * 排序转换,驼峰命名方法大写字母前加下划线(大写字母转成小写)
 * @param paramSort		排序字符串,如:addTime,modifyTime,id
 * @param sortMap		指定排序Map,没有,可以传null
 *						var sortMap = {};
 *						sortMap['propertyName']='property_name';
 * @param ignoreConvert	忽略转换的列表,以逗号分隔,如:propertyName1,propertyName2,可以传null
 * @param otherConvert  其他的,是否转换
 * @returns {String}	//add_time,modify_time,id
 */
function sortConvert(paramSort, sortMap, ignoreConvert, otherConvert){
	var ignoreMap = {};
	if(ignoreConvert && ignoreConvert.length>0){
		var ignoreConverts = ignoreConvert.split(",");
		for(var i=0; i<ignoreConverts.length; i++){
			ignoreMap[ignoreConverts[i].trim()] = true;
		}
	}
	var sortResult = "";
	var sorts = paramSort.split(",");
	var sort;
	var ch;
	for(var i=0; i<sorts.length; i++){
		sort = sorts[i].trim();
		if(sortMap && sortMap[sort]){	//先转换指定的转换
			sortResult += sortMap[sort];
		} else if(ignoreMap[sort]){		//忽略的,不转换
			sortResult += sort;
		} else if(otherConvert) {		//默认转换方式
			for(var j=0; j<sort.length; j++){
				ch = sort.charAt(j);
				if(isUpperCase(ch)){
					sortResult += "_"+ch.toLowerCase();
				} else {
					sortResult += ch;
				}
			}
		} else {
			sortResult += sort;
		}
		sortResult += ",";
	}
	if(sortResult.length>0){
		sortResult = sortResult.substring(0,sortResult.length-1);
	}
	//alert(sortResult);
	return sortResult;
}

 

二、后台通过java转换

优点:不暴露列名

缺点:用服务器资源,修改不方便

 

服务器端,写了个,不打算用,供参考

/**
 * 排序转换,驼峰命名方法加下划线
 * addTime desc, modifyTime desc,id asc
 * add_time desc,modify_time desc,id asc
 * @param orderByStr
 * @return
 */
public String orderByConvert(String orderByStr){
	String[] orderBys = orderByStr.split(",");
	String sort;
	String order;
	char ch;
	StringBuffer sb = new StringBuffer();
	for(String orderBy : orderBys){
		orderBy = orderBy.trim();
		String[] sortOrders = orderBy.split(" ");
		sort = sortOrders[0];
		order = sortOrders[1];
		for(int i=0; i<sort.length(); i++){
			ch = sort.charAt(i);
			if(Character.isUpperCase(ch)){
				sb.append('_');
				sb.append(Character.toLowerCase(ch));
			} else {
				sb.append(ch);
			}
		}
		sb.append(' ');
		sb.append(order);
		sb.append(',');
	}
	//log.info("---orderByStr:"+orderByStr);
	//log.info("---orderByStr:"+sb.toString());
	if(sb.length()>0){//
		return sb.substring(0, sb.length()-1);
	} else {
		return sb.toString();
	}
}

 

参考:

jquery easyui dataGrid动态改变排序字段名

http://blog.csdn.net/lht0211/article/details/45395637

分享到:
评论

相关推荐

    jquery easyui dataGrid动态改变排序字段名的方法

    jQuery easyui dataGrid 动态改变排序字段名,一般情况下,在使用的时候,我们会点击相应字段进行排序,这里以JAVA为例,后端的实体类字段有可能和数据库的字段不一致; 如:实体类中的属性为userName,前台filed=...

    jquery easyui datagrid 教程

    3. 表格列:Datagrid 的每一列都可自定义,包括字段名、标题、宽度、对齐方式、格式化函数等。 二、Datagrid 初始化与基本配置 1. 创建 Datagrid:通过 `$('#element').datagrid(options)` 初始化 Datagrid,其中 `...

    JQueryEasyUI datagrid框架的进阶使用

    除了数据展示,JQueryEasyUI datagrid还支持丰富的交互功能,比如分页、排序以及可定制的工具栏按钮等。通过在初始化代码中加入toolbar配置,可以为数据表格上方添加各种操作按钮,比如新增、修改、删除等。这些按钮...

    easyui帮助手册datagrid

    1. **columns**:这是 Datagrid 最基本的配置,它是一个数组,包含了表格的所有列信息,如字段名(field)、标题(title)和宽度(width)等。你可以通过这个属性自定义每一列的显示样式和内容。 2. **...

    在jquery easyui中的datagrid中添加searchbox!

    在jQuery EasyUI中,`datagrid`是一个非常常用的组件,它用于展示数据表格,具有丰富的功能和良好的用户体验。而`searchbox`则是为了增强`datagrid`的搜索功能,让用户能够更方便地查找表格中的特定数据。在标题和...

    easyui DataGrid 数据表格 属性

    EasyUI 是一个基于 jQuery 的 UI 插件集合体,它提供了丰富的用户界面组件,包括 DataGrid,这是一个用于展示数据的表格组件。DataGrid 具有众多可配置的属性,可以帮助开发者构建功能强大的数据展示和管理界面。这...

    easyui datagrid 自定义编辑器 colorpickerEditor

    EasyUI是一个基于jQuery的UI库,它提供了丰富的组件,如DataGrid,使得网页开发更加便捷。在DataGrid中,我们常常需要自定义编辑器以满足特定的用户交互需求,比如颜色选择。 首先,我们需要了解`colorpicker`是...

    JQuery_EasyUI_DataGrid_中文文档

    JQuery EasyUI DataGrid 是一个基于 jQuery 和 EasyUI 框架的数据展示组件,它提供了丰富的功能,如表格布局、数据操作、分页、筛选、排序等,常用于Web应用程序中展示和管理结构化数据。以下是对 DataGrid 中文文档...

    easyui的datagrid数据excel导出

    - **field**:对应的字段名。 - **width**:列宽。 - **align**:对齐方式。 - **hidden**:是否隐藏该列。 - **rowspan**:行合并数量。 - **colspan**:列合并数量。 #### 五、将DataGrid转换为表格(Table)结构...

    jQueryEasyUI入门共2页.pdf.zip

    这份名为“jQueryEasyUI入门共2页.pdf”的资料可能是一个简短的教程,虽然只有两页,但仍然可以涵盖一些基本概念和快速入门的指导。 首先,jQuery EasyUI 的核心是 jQuery,一个轻量级的JavaScript库,它简化了DOM...

    JQuery_EasyUI_DataGrid_编程经验

    你需要确保返回的 JSON 格式符合 DataGrid 的要求,包括字段名(field)、数据数组(rows)以及分页信息(total)。`total` 值应表示数据总数,以便 DataGrid 进行正确分页。 2. **数据分页**: - **前台分页**:...

    datagrid显示图片并点击放大浏览样式文件.zip

    首先,EasyUI是一个轻量级的JavaScript框架,它基于jQuery,提供了一系列易于使用的组件,如datagrid、dialog和menu等,用于构建用户界面。而TopJUI则是在EasyUI的基础上进行扩展和增强的框架,增加了更多的组件和...

    easyui-datagrid2-demo.zip

    - Datagrid 的列头可以根据需要自定义,包括显示字段名、宽度、对齐方式,甚至可以添加额外的图标或按钮。 7. **异步加载**: - Datagrid 支持懒加载,即当滚动到表格底部时自动加载更多数据,这在大数据量展示时...

    EasyUI的DataGrid每行数据添加操作按钮的实现代码

    在这个例子中,我们为操作列定义了一个名为`operate`的字段,设置了标题为'操作',并设置了宽度。`formatter`函数返回一个`&lt;a&gt;`标签,该标签具有`easyui-linkbutton`类,这将使它看起来像一个EasyUI按钮。 `...

    jquery easyUI datagrit详细说明

    jQuery EasyUI 的 DataGrid 是一个强大的数据展示组件,它基于 jQuery 和 EasyUI 框架构建,用于在网页上创建可交互、可排序、可分页的数据表格。DataGrid 继承了 $.fn.panel.defaults,并且通过 $.fn.datagrid....

    easyui成型模板(datagrid+tree+另附数据库)

    EasyUI 是一个基于 jQuery 的 UI 组件库,它提供了丰富的前端界面组件,如表格(datagrid)、树形控件(tree)等,使得开发者能够快速构建美观且功能强大的 Web 应用程序。在这个“easyui成型模板”中,包含了 ...

    jQuery EasyUI 扩展(tip和form)

    jQuery EasyUI 是一个基于 jQuery 的前端框架,它提供了一系列易于使用的组件,如对话框、表格、下拉菜单等,帮助开发者快速构建用户界面。在"jQuery EasyUI 扩展(tip和form)"这个主题中,我们将深入探讨如何利用 ...

    jquery easyui 中文文档

    jQuery EasyUI 框架中几个常见的组件,该框架还包含了大量的其他组件和功能,如`Messager`(提示框)、`NumberBox`(数字框)、`ValidateBox`(验证框)、`Pagination`(分页)、`Window`(窗口)、`Panel`(面板)...

    Jquery-easyui添加搜索框

    `value` 参数代表用户输入的关键词,`name` 参数则是关联的字段名。你需要自定义 `doSearch` 函数来处理搜索逻辑,例如: ```javascript function doSearch(value, name) { var grid = $('#dataGrid'); // 假设...

Global site tag (gtag.js) - Google Analytics