jquery easyui datagrid 数据绑定问题

Posted 2023-05-01

ProductAction关键代码如下：
private Map<String,Object> result = new HashMap<String,Object>();
public Map<String, Object> getResult()
return result;


public void setResult(Map<String, Object> result)
this.result = result;


public String list()
List<Product> lstProduct = this.productService.find();
this.getResult().put("lstProduct", lstProduct);
return "json";


struts.xml中关键代码如下：
<package name="basedata" namespace="/basedata" extends="json-default">
<action name="product/*" class="productAction" method="1">
<result>/WEB-INF/page/basedata/productMain.jsp</result>
<result name="json" type="json">
<param name="ignoreHierarchy">false</param>
</result>
</action>
</package>

请教各位大虾：怎么使用easyui的datagrid来绑定上面action中返回的json数据呀？最好是给出具体的实现代码，谢谢！！

参考技术A ①首先肯定需要有一个table标签，给它定义一个id，在js中通过id.datagrid方法即可创建表格
<table id="tt"></table>
$('#tt').datagrid(options);

②创建表格的列名有两种方式：第一种是直接在table标签中定义，第二种是在js中定义：
我使用的是第一种方式：
<!-- 表格 -->
<table id="loginInfoTable"
title="用户信息一览"
border="0"
cellspacing="0"
cellpadding="0"
iconCls="icon-edit"
width="98%"
idField="loginId"
pagination="true"
remoteSort="false"
singleSelect="false"
showFooter="false"
striped="true"
url="<%=root%>/ospm/loginInfo/doLoginInfoSearch.jhtml">
<thead>
<tr align="center">
<th field="ck" width="20" checkbox="true" width="20"></th>
<th field="loginCode" width="200">用户名</th>
<th field="statuValue" width="100">状态</th>
<th field="opt" formatter='optFormater' width="150">操作</th>
</tr>
</thead>
</table>

③向后台请求数据
datagrid有一个属性叫url，在进入页面后，它会通过ajax方式向后台发送请求，后台封装相应数据（JSON格式）再返回给前台即可显示。注意：datagrid在回调函数中必须获得两项json数据：total表示查询出的总结过，rows表示显示在table中的数据集合。
/**
* 封装Json数据
*/
long total = 0; // 符合查询的总条数
List<LoginInfoTableDto> lstTable = null; // 查询结果
total = (Long) mapLoginInfo.get(Constant4Ospm.TOTAL);
if (mapLoginInfo.get(Constant4Ospm.SEARCH_RESULT) != null)
lstTable = (List<LoginInfoTableDto>) mapLoginInfo
.get(Constant4Ospm.SEARCH_RESULT);
else
//注：如果从数据库查询不出数据，也必须封装一个空的json集合，不然页面就会报js错误
lstTable = new ArrayList<LoginInfoTableDto>();

JSONObject datas = new JSONObject();
// 设置总共有多少条记录
datas.put(Constant4Ospm.TOTAL, total);
// 设置当前页的数据
datas.put(Constant4Ospm.PAGE_SIZE, lstTable);

④后台数据与表格关联
后台过来的数据怎么与表格每一列对应呢？其实很简单：后台rows中包含了名叫LoginInfoTableDto的javabean-json集合，datagrid的field和idField对应LoginInfoTableDto中的一个属性（大体上是这样，当然field也可以不对应javabean的属性，你可以进行一些转换）。本回答被提问者采纳

jQuery EasyUI教程之datagrid应用

一、利用jQuery EasyUI的DataGrid创建CRUD应用

 

    对网页应用程序来说，正确采集和管理数据通常很有必要，DataGrid的CRUD功能允许我们创建页面来列表显示和编辑数据库记录。本教程将教会你如何运用jQuery EasyUI框架来实现DataGrid的CRUD功能 。

我们会用到如下插件:

· datagrid: 列表显示数据。

· dialog: 增加或编辑单个用户信息。

· form: 用来提交表单数据。

· messager: 用来显示操作信息。

 

第一步：准备数据库

 

使用MySql数据库来保存用户信息，并创建数据库和“users”表。

 

 

第二步：创建DataGrid数据表格来显示用户信息

不需要编写任何javascript代码创建DataGrid数据表格。

Html代码

<table id="dg" title="My Users" class="easyui-datagrid"       style="width:550px;height:250px"
url="get_users.php"
toolbar="#toolbar"
rownumbers="true" fitColumns="true" singleSelect="true">
    <thead>
        <tr>
            <th field="firstname" width="50">First Name</th>
            <th field="lastname" width="50">Last Name</th>
            <th field="phone" width="50">Phone</th>
            <th field="email" width="50">Email</th>
        </tr>
    </thead>
</table>
<div id="toolbar">
    <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newUser()">New User</a>
    <a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editUser()">Edit User</a>
    <a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="destroyUser()">Remove User</a>
</div>

如下图所示，我们不需要写任何一行javascript代码:

DataGrid使用“url”属性来指定“get_users.php”，用来从服务器端接收数据。

第三步：创建表单对话框

增加或者编辑用户信息，我们使用同一对话框。

Html代码

<div id="dlg" class="easyui-dialog" style="width:400px;height:280px;padding:10px 20px" closed="true" buttons="#dlg-buttons">
    <div class="ftitle">User Information</div>
    <form id="fm" method="post">
        <div class="fitem">
            <label>First Name:</label>
            <input name="firstname" class="easyui-validatebox" required="true">
        </div>
        <div class="fitem">
            <label>Last Name:</label>
            <input name="lastname" class="easyui-validatebox" required="true">
        </div>
        <div class="fitem">
            <label>Phone:</label>
            <input name="phone">
        </div>
        <div class="fitem">
            <label>Email:</label>
            <input name="email" class="easyui-validatebox" validType="email">
        </div>
    </form>
</div>
<div id="dlg-buttons">
    <a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="saveUser()">Save</a>
    <a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$(‘#dlg‘).dialog(‘close‘)">Cancel</a>
</div>

对话框的创建也不需要编写javascript代码。
 

 

第四步：实现增加和编辑用户功能

 

增加用户信息时，打开对话框，清除表单数据。

Js代码