天天看點

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

好,靜态的頁面已經可以完成了,下面就開始加上背景的處理部分。

檢視easyui的API可以看到,如果需要背景支援的話,需要設定url屬性,下面用java來做背景處理資料。

傳輸的格式用的是JSON,如果你還不知道JSON那麼就去baidu一下好了。

背景現在隻添加了struts和spring的支援,如果需要連接配接資料庫那麼添加上hibernate或者用jdbc等資料處理層的架構好了

好建立jsp頁面,添加預設的編碼格式為UTF-8

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

代碼

<%@ 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包

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

<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(){}中添加調用表格的程式

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

$('#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中調用的方法的内容如下:

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

/**

* 依賴性設定

*

* @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方法

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

* 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的輸出傳回給調用的頁面

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

// 輸出json格式資料

private void outString(HttpServletResponse response, String str) {

PrintWriter out = response.getWriter();

// out.write(str);

out.println(str);

out.flush();

out.close();

} catch (IOException e) {

其中使用net.sf.json.JSONArray來處理生成的json對象,将list中的内容格式化成頁面上需要傳回的json格式,當然也可以使用其它的工具類來完成。

下面把完整的jsp頁面和要使用的幾個類檔案的源碼貼上來吧

要使用的struts檔案就自己配置一下吧

 接下來是Action中的代碼可以在上邊找一下

然後是邏輯類中的代碼檔案

好了,看一下運作的效果吧,這個工程中沒有加上分頁,因為資料量不大。

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

如果有需要源碼的我可以把源碼分享出來,下一步會完成在産品編号1和産品編号2中添加值後在清單中動态顯示。