您的位置:首页 > 产品设计 > UI/UE

layui数据表格数据字典转换实现

2018-11-09 15:35 1731 查看

前言

项目中使用了贤心大大的layui(零门槛开箱即用的前端UI解决方案),但是目前缺失数据表格数据字典的转换功能(本人是没找到),以下是解决方法:延用layui中的laytpl模版引擎。

1.下载dwr的依赖包

<dependency>
<groupId>org.directwebremoting</groupId>
<artifactId>dwr</artifactId>
<version>3.0.2-RELEASE</version>
</dependency>

2. spring纯注解配置dwr的servlet

private void initializeDwrServlet(ServletContext servletContext) {
Dynamic myServlet =
servletContext.addServlet("dwr", DwrServlet.class);
Map<String, String> initParameters=new HashMap<String, String>();
initParameters.put("debug","true");        //参数配置
myServlet.setInitParameters(initParameters);
myServlet.addMapping("/dwr/*");
}

记得在项目初始化入口调用此方法,xml配置的可以写到web.xml中,这里不作说明。

3创建dwr.xml

此文件路径需放置在web-inf下

<!DOCTYPE dwr PUBLIC
"-//GetAhead Limited//DTD Direct Web Remoting 3.0//EN"
"http://getahead.org/dwr/dwr30.dtd">

<dwr>
<allow>
<create creator="new" javascript="dictionary">
<param name="class"  value="com.util.DictionaryUtil"/>
</create>
</allow>
</dwr>

创建DictionaryUtil后台转换数据字典静态方法:

public class DictionaryUtil {
public static String getValue(String sCatalog, String sKey) {
//从缓存中读取数据字典,返回值返回
return value;
}
}

4 配置成功说明

ip/应用/dwr/test/dictionary; 浏览器输入地址出现页面则说明配置成功。

页面会有两个js路径,记录好路径即可,在调用页面需要引入engine.js和dictionary.js(根据配置文件中的名称而来)

5公共的js方法

var Dictionaryvalue = function(catalogcode,key){ //1.数据字典编码2参数key
var dicvalue;
Dictionary.getValue(catalogcode,key,{
callback:function(data){dicvalue = data;
},
async:false
}  );
return  dicvalue;
}

6 layui数据表格调用

<th lay-data="{field:'temptype',templet: '#temptypeTpl'}">类型</th>
<script type="text/html" id="temptypeTpl">
{{Dictionaryvalue('dispatchFileType',d.temptype)}}
</script>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: