使用jquery-easyui写的CRUD插件(3)

好，静态的页面已经可以完成了，下面就开始加上后台的处理部分。

查看easyui的API可以看到,如果需要后台支持的话，需要设置url属性，下面用java来做后台处理数据。

传输的格式用的是JSON，如果你还不知道JSON那么就去baidu一下好了。

 

后台现在只添加了struts和spring的支持，如果需要连接数据库那么添加上hibernate或者用jdbc等数据处理层的框架好了

 

好新建jsp页面，添加默认的编码格式为UTF-8

 

代码 
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://struts.apache.org/tags-bean" prefix="bean" %>
<%@ taglib uri="http://struts.apache.org/tags-html" prefix="html" %>
<%@ taglib uri="http://struts.apache.org/tags-logic" prefix="logic" %>

 

 

 设置默认路径

 

<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
request.setAttribute("basepath",basePath);
%>

 

 

 添加默认的css和必须的js包

 

复制代码
代码 
    <link rel="stylesheet" type="text/css" href="${basepath}resources/default.css"/>
    <link rel="stylesheet" type="text/css" href="${basepath}resources/themes/default/easyui.css"/>
    <link rel="stylesheet" type="text/css" href="${basepath}resources/themes/icon.css">
    
    <script type="text/javascript" src="${basepath}resources/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="${basepath}resources/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="${basepath}resources/jquery[1].json-1.3.min.js"></script>
复制代码

 

 

 OK，现在可以开始写生成表格的程序了。

在$(function(){}中添加调用表格的程序

 

复制代码
代码 
$('#tt').datagrid({
                title:'订购鉴权依赖设置',
                iconCls:'icon-save',
                width:500,
                height:200,
                nowrap: false,
                striped: true,
                collapsible:true,
                url:'${basepath}simulation/simulation.do?method=yilai',
                remoteSort: false,
                idField:'id',
                frozenColumns:[[
                    {field:'ck',checkbox:true},
                    {title:'id',field:'id',width:80}
                ]],
                columns:[
                    [
                        {title:'产品编号1',field:'key',width:160},
                        {title:'产品编号2',field:'value',width:160}
                    ]
                ],
                rownumbers:true
//                toolbar:[{
//                    id:'btncut',
//                    text:'删除',
//                    iconCls:'icon-cut',
//                    handler:function(){
//                        alert('del')
//                    }
//                }]
            });
        });
复制代码

 

 

 要注意生成的数据的格式，是标准的JSON的格式。

将struts所使用的action配置到struts-config.xml中

在Action中调用的方法的内容如下：

 

复制代码
代码 
    /**
     * 依赖性设置
     * 
     * @param map
     * @param form
     * @param req
     * @param res
     * @return
     * @throws Exception
     */
    public ActionForward huchi(ActionMapping map, ActionForm form,
            HttpServletRequest req, HttpServletResponse res) throws Exception {

        List<PropertyBean> l = simulationBO.propForGrid("huchi");
        JSONArray jsonArray = JSONArray.fromObject(l);

        String baseStr = "{\"total\":1,\"rows\":" + jsonArray.toString()
                + "}";

        outJsonUTFString(res, baseStr);
        return null;
    }
复制代码

注意返回的值的内容，编码格式为UTF-8，看一下outJsonUTFString方法

 

复制代码
代码 
    /**
     * dengwei add JSON数据输出
     * 
     * @param response
     * @param json
     */
    private void outJsonUTFString(HttpServletResponse response, String json) {
        // response.setContentType("text/javascript;charset=UTF-8");
        response.setContentType("text/html;charset=UTF-8");
        try {
            outString(response, json);
        } catch (Exception e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
    }
复制代码

使用response的输出返回给调用的页面

 

复制代码
代码 
    // 输出json格式数据
    private void outString(HttpServletResponse response, String str) {
        try {
            PrintWriter out = response.getWriter();
            // out.write(str);
            out.println(str);
            out.flush();
            out.close();
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
复制代码

 

其中使用net.sf.json.JSONArray来处理生成的json对象，将list中的内容格式化成页面上需要返回的json格式，当然也可以使用其它的工具类来完成。

 

下面把完整的jsp页面和要使用的几个类文件的源码贴上来吧

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://struts.apache.org/tags-bean" prefix="bean" %>
<%@ taglib uri="http://struts.apache.org/tags-html" prefix="html" %>
<%@ taglib uri="http://struts.apache.org/tags-logic" prefix="logic" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
request.setAttribute("basepath",basePath);
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html:html>
<head>
    <base href="<%=basePath%>">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>依赖设置</title>
     
    <link rel="stylesheet" type="text/css" href="${basepath}resources/default.css"/>
    <link rel="stylesheet" type="text/css" href="${basepath}resources/themes/default/easyui.css"/>
    <link rel="stylesheet" type="text/css" href="${basepath}resources/themes/icon.css">
     
    <script type="text/javascript" src="${basepath}resources/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="${basepath}resources/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="${basepath}resources/jquery[1].json-1.3.min.js"></script>
 
    <script>
         
        $(function(){
            $('#tt').datagrid({
                title:'订购鉴权依赖设置',
                iconCls:'icon-save',
                width:500,
                height:200,
                nowrap: false,
                striped: true,
                collapsible:true,
                url:'${basepath}simulation/simulation.do?method=yilai',
                remoteSort: false,
                idField:'id',
                frozenColumns:[[
                    {field:'ck',checkbox:true},
                    {title:'id',field:'id',width:80}
                ]],
                columns:[
                    [
                        {title:'产品编号1',field:'key',width:160},
                        {title:'产品编号2',field:'value',width:160}
                    ]
                ],
                rownumbers:true
//              toolbar:[{
//                  id:'btncut',
//                  text:'删除',
//                  iconCls:'icon-cut',
//                  handler:function(){
//                      alert('del')
//                  }
//              }]
            });
        });
         
        function setProp(){
            $('#formId').form('submit',{
                url:"${basepath}simulation/simulation.do?method=modifyYilai",
                onSubmit:function(){},
                success:function(data){
                    eval('data='+data);
                    if (data.success){
                        $.messager.alert('操作提示','操作成功!','info');
                        $('#tt').datagrid('reload');
                        $('#formId').form('clear');
                    } else {
                        $.messager.alert('错误',data.msg,'error');
                    }
                }
            });
        }
 
    </script>
</head>
<body>
 
 
        <html:form action="/simulation/simulation.do?method=setSimulation" styleId="formId">
             
            <div align="center">
                <table>
                    <tr>
                        <td align="left">产品编号1：</td>
                        <td><input id="pbkey" type="text" name="pb.key" value=""/></td>
                    </tr>
                    <tr>
                        <td align="left">产品编号2：</td>
                        <td align="left"><input id="pbvalue" type="text" name="pb.value" value=""/></td>
                    </tr>
                </table>
            </div>
             
             
 
        <div style="text-align:center;padding:5px;">
            <a href="javascript:void(0)" onclick="setProp()" id="btn-save" class="easyui-linkbutton" icon="icon-ok">设置</a>
        </div>
         
        <div align="center">
            <table id="tt"></table>
        </div>
         
         
         
        </html:form>
     
     
</body>
</html:html>

要使用的struts文件就自己配置一下吧

?
1
2
3
4
5
6
7
8
9
10
<action-mappings>
    <action attribute="SimulationForm" input="/index.jsp"
        name="SimulationForm" path="/simulation/simulation" parameter="method"
        scope="request"
        type="org.springframework.web.struts.DelegatingActionProxy">
        <forward name="index" path="/views/vsopsimulation/index.jsp" />
        <forward name="crmindex" path="/views/crmsimulation/index.jsp" />
    </action>
 
</action-mappings>

 

 

 

 接下来是Action中的代码可以在上边找一下

然后是逻辑类中的代码文件

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
public List<PropertyBean> propForGrid(String type){
        List<PropertyBean> l = new ArrayList<PropertyBean>();
        String value = "";
        if("yilai".equals(type)){
            value = ConfigParser.get("yilai_list");
        }else{
            value = ConfigParser.get("huchi_list");
        }
        if(value.length()>0){
            String[] str = value.split(";");
            for (int i = 0; i < str.length; i++) {
                String[] kvStr = str[i].split(",");
                PropertyBean prob = new PropertyBean();
                prob.setId(i);
                prob.setKey(kvStr[0]);
                prob.setValue(kvStr[1]);
                l.add(prob);
            }
        }
        return l;
    }

好了，看一下运行的效果吧，这个工程中没有加上分页，因为数据量不大。

如果有需要源码的我可以把源码分享出来，下一步会完成在产品编号1和产品编号2中添加值后在列表中动态显示。

posted @   skyme  阅读(3598)  评论(1)  编辑  收藏  举报
编辑推荐：
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
阅读排行：
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 地球OL攻略 —— 某应届生求职总结
· 提示词工程——AI应用必不可少的技术
· Open-Sora 2.0 重磅开源！
· 周边上新：园子的第一款马克杯温暖上架
点击右上角即可分享
微信分享提示
AI IDE Trae