如果属性名是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 动态改变排序字段名,一般情况下,在使用的时候,我们会点击相应字段进行排序,这里以JAVA为例,后端的实体类字段有可能和数据库的字段不一致; 如:实体类中的属性为userName,前台filed=...
3. 表格列:Datagrid 的每一列都可自定义,包括字段名、标题、宽度、对齐方式、格式化函数等。 二、Datagrid 初始化与基本配置 1. 创建 Datagrid:通过 `$('#element').datagrid(options)` 初始化 Datagrid,其中 `...
除了数据展示,JQueryEasyUI datagrid还支持丰富的交互功能,比如分页、排序以及可定制的工具栏按钮等。通过在初始化代码中加入toolbar配置,可以为数据表格上方添加各种操作按钮,比如新增、修改、删除等。这些按钮...
1. **columns**:这是 Datagrid 最基本的配置,它是一个数组,包含了表格的所有列信息,如字段名(field)、标题(title)和宽度(width)等。你可以通过这个属性自定义每一列的显示样式和内容。 2. **...
在jQuery EasyUI中,`datagrid`是一个非常常用的组件,它用于展示数据表格,具有丰富的功能和良好的用户体验。而`searchbox`则是为了增强`datagrid`的搜索功能,让用户能够更方便地查找表格中的特定数据。在标题和...
EasyUI 是一个基于 jQuery 的 UI 插件集合体,它提供了丰富的用户界面组件,包括 DataGrid,这是一个用于展示数据的表格组件。DataGrid 具有众多可配置的属性,可以帮助开发者构建功能强大的数据展示和管理界面。这...
EasyUI是一个基于jQuery的UI库,它提供了丰富的组件,如DataGrid,使得网页开发更加便捷。在DataGrid中,我们常常需要自定义编辑器以满足特定的用户交互需求,比如颜色选择。 首先,我们需要了解`colorpicker`是...
JQuery EasyUI DataGrid 是一个基于 jQuery 和 EasyUI 框架的数据展示组件,它提供了丰富的功能,如表格布局、数据操作、分页、筛选、排序等,常用于Web应用程序中展示和管理结构化数据。以下是对 DataGrid 中文文档...
- **field**:对应的字段名。 - **width**:列宽。 - **align**:对齐方式。 - **hidden**:是否隐藏该列。 - **rowspan**:行合并数量。 - **colspan**:列合并数量。 #### 五、将DataGrid转换为表格(Table)结构...
这份名为“jQueryEasyUI入门共2页.pdf”的资料可能是一个简短的教程,虽然只有两页,但仍然可以涵盖一些基本概念和快速入门的指导。 首先,jQuery EasyUI 的核心是 jQuery,一个轻量级的JavaScript库,它简化了DOM...
你需要确保返回的 JSON 格式符合 DataGrid 的要求,包括字段名(field)、数据数组(rows)以及分页信息(total)。`total` 值应表示数据总数,以便 DataGrid 进行正确分页。 2. **数据分页**: - **前台分页**:...
首先,EasyUI是一个轻量级的JavaScript框架,它基于jQuery,提供了一系列易于使用的组件,如datagrid、dialog和menu等,用于构建用户界面。而TopJUI则是在EasyUI的基础上进行扩展和增强的框架,增加了更多的组件和...
- Datagrid 的列头可以根据需要自定义,包括显示字段名、宽度、对齐方式,甚至可以添加额外的图标或按钮。 7. **异步加载**: - Datagrid 支持懒加载,即当滚动到表格底部时自动加载更多数据,这在大数据量展示时...
在这个例子中,我们为操作列定义了一个名为`operate`的字段,设置了标题为'操作',并设置了宽度。`formatter`函数返回一个`<a>`标签,该标签具有`easyui-linkbutton`类,这将使它看起来像一个EasyUI按钮。 `...
jQuery EasyUI 的 DataGrid 是一个强大的数据展示组件,它基于 jQuery 和 EasyUI 框架构建,用于在网页上创建可交互、可排序、可分页的数据表格。DataGrid 继承了 $.fn.panel.defaults,并且通过 $.fn.datagrid....
EasyUI 是一个基于 jQuery 的 UI 组件库,它提供了丰富的前端界面组件,如表格(datagrid)、树形控件(tree)等,使得开发者能够快速构建美观且功能强大的 Web 应用程序。在这个“easyui成型模板”中,包含了 ...
jQuery EasyUI 是一个基于 jQuery 的前端框架,它提供了一系列易于使用的组件,如对话框、表格、下拉菜单等,帮助开发者快速构建用户界面。在"jQuery EasyUI 扩展(tip和form)"这个主题中,我们将深入探讨如何利用 ...
jQuery EasyUI 框架中几个常见的组件,该框架还包含了大量的其他组件和功能,如`Messager`(提示框)、`NumberBox`(数字框)、`ValidateBox`(验证框)、`Pagination`(分页)、`Window`(窗口)、`Panel`(面板)...
`value` 参数代表用户输入的关键词,`name` 参数则是关联的字段名。你需要自定义 `doSearch` 函数来处理搜索逻辑,例如: ```javascript function doSearch(value, name) { var grid = $('#dataGrid'); // 假设...