LigerUI之Grid使用详解(三)——字典数据展示
一、问题概述 |
在开发web信息管理系统时,使用Web前端框架可以帮助我们快速搭建一组风格统一的界面效果,而且能够解决大多数浏览器兼容问题,提升开发效率。在关于LigerGrid的前两篇的内容里,给大家介绍了表格的基本的展示数据用法。(传送门:LigerUI之Grid使用详解(一)——显示数据 、LigerUi之Grid使用详解(二)——数据编辑 )
在实际应用开发中,我们会经常遇到这样的场景,在展示业务数据的时候需要把业务数据中的参数项或者字典项的编码转换成参数名称或者字典名称展示出来。在这里本人总结了三种解决方案,并做了对比。
二、表格中显示字典数据 |
首先创建字典表和业务数据表,创建字典参数表,并插入数据:
CREATE TABLE SYSPARAMS
(
PID VARCHAR2(10),
CATEGORYCODE VARCHAR2(10),
CATEGORYNAME VARCHAR2(50),
PCODE VARCHAR2(10),
PNAME VARCHAR2(50),
ENABLED CHAR(1) DEFAULT 1,
SORTNO NUMBER,
REMARK VARCHAR2(100)
);
ALTER TABLE SYSPARAMS
ADD CONSTRAINT SYSPARAMS_PK_PID PRIMARY KEY (PID); INSERT INTO SYSPARAMS VALUES('','PARTSBRAND','配件品牌','','三一','',1,'');
INSERT INTO SYSPARAMS VALUES('','PARTSBRAND','配件品牌','','徐工','',2,'');
INSERT INTO SYSPARAMS VALUES('','PARTSBRAND','配件品牌','','中联','',3,'');
创建业务表,并插入测试数据:
CREATE TABLE BIZ_PARTS
(
PCODE VARCHAR2(10),
PNAME VARCHAR2(50),
PBRAND VARCHAR2(10),
PNO VARCHAR2(50),
PGENNO VARCHAR2(50),
PMODEL VARCHAR2(50),
PSIZE VARCHAR2(20),
PWEIGHT VARCHAR2(10),
PUNIT VARCHAR2(10),
PSPRICE NUMBER(10,2),
REMARK VARCHAR2(100)
);
ALTER TABLE BIZ_PARTS
ADD CONSTRAINT BIZ_PRATS_PK_PCODE PRIMARY KEY (PCODE);
INSERT INTO BIZ_PARTS VALUES('PJ00000001','DH150主控阀','','DB11-1-50/315','','DB11-1-50/315',NULL,NULL,NULL,200,NULL);
INSERT INTO BIZ_PARTS VALUES('PJ00000002','EC360液压泵','','DB10-2-30/315','','DB10-2-30/33333',NULL,NULL,NULL,300,NULL);
INSERT INTO BIZ_PARTS VALUES('PJ00000003','DH420斗齿','','DB20-1-30/315','','DB20-1-30/315555',NULL,NULL,NULL,300,NULL);
数据准备好之后,我们分别来看看这三种解决方案是如何实现的。
解决方案一
首先来看第一种解决方案,在这种解决方案中,前台需要显示什么数据,我们在后台就查询什么数据传递给前台,即在后台查询时,采用表连接查询或者子查询的方式将数据查询出,并封装成实体集合传递给前台。查询SQL如下:
SELECT B.PCODE, B.PNAME, B.PBRAND, P.PNAME AS PBRANDNAME, B.PNO, B.PMODEL, B.PSPRICE
FROM BIZ_PARTS B, SYSPARAMS P
WHERE B.PBRAND = P.PCODE
AND P.CATEGORYCODE = 'PARTSBRAND';
或者:
SELECT B.PCODE,
B.PNAME,
B.PBRAND,
B.PNO,
B.PMODEL,
B.PSPRICE,
(SELECT P.PNAME
FROM SYSPARAMS P
WHERE B.PBRAND = P.PCODE
AND P.CATEGORYCODE = 'PARTSBRAND') AS PBRANDNAME
FROM BIZ_PARTS B;
最终结果呈现如下:
此解决方案优点是前台无需做任何处理即可展示我们想看到的数据,缺点是增加查询复杂度,增加实体属性,并且业务数据和参数数据在混杂在一起,不利于后期维护和扩展。
解决方案二
直接查询业务数据,所有展示问题交给前台处理,步骤如下:
1、 编写查询SQL:
SELECT B.PCODE, B.PNAME, B.PBRAND, B.PNO, B.PMODEL, B.PSPRICE FROM BIZ_PARTS B;
2、 将查询数据展示在前台表格中。
$("#maingrid").ligerGrid({
columns:[
{display:"配件名称",name:"name",isAllowHide:false,align:"left",width:140},
{display:"配件品牌",name:"brandCode",isAllowHide:false,align:"left",width:120},
{display:"配件件号",name:"no",isAllowHide:false,align:"left",width:120},
{display:"配件型号",name:"model",isAllowHide:false,align:"left",width:140},
{display:"单价",name:"price",type:"float",isAllowHide:false,
align:"left",width:80,
render:function(item){
return formatCurrency(item.price);
}
}
],
rownumbers:true,
isScroll:true,
url:"main/bizParts.action?reqCode=findOnlyBizParts",
width:"99.7%"
});
效果如下:
可以看到配件品牌展示的是编码,我们需要将其转换为名称字符,继续改造代码。
3、 使用ajax将本业务数据中用到的字典数据加载到本页面后,再去构建表格,并利用表格的render属性对单元格内容进行渲染。
A、使用ajax将配件品牌字典查询保证到页面,代码如下:
$.post("main/bizParts.action?reqCode=findSysParamsByCategoryCode",
{code:"PARTSBRAND"},
function(data){
brandData = data;
init_grid();
},"json");
B、参数数据加载成功后,初始化表格并在表格的配件品牌列中添加渲染函数
{display:"配件品牌",name:"brandCode",isAllowHide:false,align:"left",width:120,
render:function(item){
for(var i=0;i<brandData.length;i++){
if(item.brandCode==brandData[i].pcode){
return brandData[i].pname;
}
}
}
}
最终效果如方案一。此解决方案优点在于后台数据解耦,有利于后期的维护和扩展,缺点在于除了专注于业务数据的同时,还要处理相关参数数据。
解决方案三
采用自定义标签,将字典数据的获取及渲染函数全部封装到自定义标签中,这样我们在用到字典的时候直接使用标签即可。具体步骤如下:
1、 编写标签处理类:在此做简单处理,渲染函数的命名方式为:render_字典类型编号。实际上字符连接这块内容,我们应该定义成tpl模板。
public class JreduSysParamsTag extends SimpleTagSupport {
private String categoryCode;
public String getCategoryCode() {
return categoryCode;
}
public void setCategoryCode(String categoryCode) {
this.categoryCode = categoryCode;
} @Override
public void doTag() throws JspException, IOException {
SysParamsService sysParamService = new SysParamsServiceImpl();
List<Map<String, String>> list =sysParamService.findSysParamsByCategoryCode(categoryCode); JSONArray array = JSONArray.fromObject(list);
StringBuilder stringBuilder = new StringBuilder();
stringBuilder.append("<script>");
stringBuilder.append(" var data_").append(categoryCode).append("=");
stringBuilder.append(array.toString());
stringBuilder.append(";");
stringBuilder.append("function ");
stringBuilder.append("render_").append(categoryCode);
stringBuilder.append("(item,item1,item2,cell){");
stringBuilder.append("for( var i=0;i<data_").append(categoryCode).append(".length;i++){");
stringBuilder.append("if(item[cell.name]==data_").append(categoryCode).append("[i].id){");
stringBuilder.append("return data_").append(categoryCode).append("[i].text;");
stringBuilder.append("}");
stringBuilder.append("}");
stringBuilder.append("}");
stringBuilder.append("</script>");
getJspContext().getOut().write(stringBuilder.toString());
}
}
2、 编写标签库文件:
<tag>
<name>JreduSysParams</name>
<tagclass>com.jereh.edu.tag.JreduSysParamsTag</tagclass>
<bodycontent>empty</bodycontent>
<attribute>
<name>categoryCode</name>
<required>true</required>
</attribute>
</tag>
3、 在jsp页面中结合ligerGrid使用此标签。
<jredu:JreduSysParams categoryCode="PARTSBRAND"/>
修改grid列的render:
{display:"配件品牌",name:"brandCode",isAllowHide:false,align:"left",width:120,
render:render_PARTSBRAND
}
最终效果如下:
综上所述,方案三不仅解决了之前两种方案中的问题,还能够实现组件的重用,在此推荐大家使用此方案解决表格中显示字典数据的问题。
※ 源码下载
如需源码,请点击百度云源码下载:http://pan.baidu.com/s/1gd6DIYv ,欢迎分享。
出处:http://www.cnblogs.com/jerehedu/
本文版权归烟台杰瑞教育科技有限公司和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
LigerUI之Grid使用详解(三)——字典数据展示的更多相关文章
- LigerUI之Grid使用详解(一)——显示数据 --分页
http://www.cnblogs.com/jerehedu/p/4218560.html 首先给大家介绍最常用的数据展示组件Grid,使用步骤如下: 1.页面中正确引入样式文件及相应组件 < ...
- LigerUI之Grid使用详解(一)——显示数据
目录: 一.概述 二.Grid使用步骤 三.使用Grid展示数据 四.源码下载 一.概述 在开发web信息管理系统时,使用Web前端框架可以帮助我们快速搭建一组风格统一的界面效果,而且能够解决大多数浏 ...
- LigerUi之Grid使用详解(二)——数据编辑
一.问题概述 在开发web信息管理系统时,使用Web前端框架可以帮助我们快速搭建一组风格统一的界面效果,而且能够解决大多数浏览器兼容问题,提升开发效率.所以上一篇文章为大家介绍了LigerGrid的显 ...
- css之Grid Layout详解
css之Grid Layout详解 CSS Grid Layout擅长将页面划分为主要区域,或者在从HTML基元构建的控件的各个部分之间定义大小,位置和图层之间的关系. 与表格一样,网格布局使作者能够 ...
- .NET DLL 保护措施详解(三)最终效果
针对.NET DLL 保护措施详解所述思路完成最终的实现,以下为程序包下载地址 下载 注意: 运行环境为.net4.0,需要安装VS2015 C++可发行组件包vc_redist.x86.exe.然后 ...
- Android 之窗口小部件详解(三) 部分转载
原文地址:http://blog.csdn.net/iefreer/article/details/4626274. (一) 应用程序窗口小部件App Widgets 应用程序窗口小部件(Widget ...
- WebSocket安卓客户端实现详解(三)–服务端主动通知
WebSocket安卓客户端实现详解(三)–服务端主动通知 本篇依旧是接着上一篇继续扩展,还没看过之前博客的小伙伴,这里附上前几篇地址 WebSocket安卓客户端实现详解(一)–连接建立与重连 We ...
- logback -- 配置详解 -- 三 -- <encoder>
附: logback.xml实例 logback -- 配置详解 -- 一 -- <configuration>及子节点 logback -- 配置详解 -- 二 -- <appen ...
- python设计模式之装饰器详解(三)
python的装饰器使用是python语言一个非常重要的部分,装饰器是程序设计模式中装饰模式的具体化,python提供了特殊的语法糖可以非常方便的实现装饰模式. 系列文章 python设计模式之单例模 ...
随机推荐
- 使用补丁修改DSDT/SSDT [DSDT/SSDT综合教程]
请尊重原贴作者 与 本贴楼主.原作者把自己丰富的经验分享给了大家,本贴作者每个贴子平均花了3个小时翻译. 所以,转载请注明出处:原贴地址:http://www.tonymacx86.com/ ...
- Go语言特点
作者:asta谢链接:https://www.zhihu.com/question/21409296/answer/18184584来源:知乎 1.Go有什么优势 可直接编译成机器码,不依赖其他库,g ...
- Java中的Runnable、Callable、Future、FutureTask的区别
本文转载自:http://blog.csdn.net/bboyfeiyu/article/details/24851847 Runnable 其中Runnable应该是我们最熟悉的接口,它只有一个ru ...
- hihocoder #1301 : 筑地市场 二分+数位dp
#1301 : 筑地市场 题目连接: http://hihocoder.com/problemset/problem/1301 Description 筑地市场是位于日本东京都中央区筑地的公营批发市场 ...
- POJ Anniversary party 树形DP
/* 树形dp: 给一颗树,要求一组节点,节点之间没有父子关系,并且使得所有的节点的权值和最大 对于每一个节点,我们有两种状态 dp[i][0]表示不选择节点i,以节点i为根的子树所能形成的节点集所能 ...
- Android 菜单键和返回键互换
打开RE管理器找到system/usr/keylayout/ 长按qwerty.kl选择以文本编辑器查看 将里面的MENU和BACK全部替换掉 保存,退出管理器,重启手机,菜单键和返回键的位置就调换过 ...
- Android实例剖析笔记(三)
摘要:点介绍Activity的生命周期,通过一个简单的实验来摸索状态转换的机制 Activity的生命周期 Activity类中有许多onXXX形式的函数可以重载,比如onCreate,onStart ...
- Ext ComboBox 动态查询
Ext中的combobox有属性typeAhead:true 可以实现模糊匹配,但是是从开始匹配的,如果需要自定的的匹配,则需要监听beforequery方法,实现自己的匹配查询方法: var gfx ...
- 【c语言】模拟实现库函数的atof函数
// 模拟实现库函数的atof函数 #include <stdio.h> #include <string.h> #include <assert.h> #incl ...
- Selenium2+python自动化36-判断元素存在
前言 最近有很多小伙伴在问如何判断一个元素是否存在,这个方法在selenium里面是没有的,需要自己写咯. 元素不存在的话,操作元素会报错,或者元素有多个,不唯一的时候也会报错.本篇介绍两种判断元素存 ...