easyui datagrid 数据绑定 java easyui的datagrid怎么绑定数据库

easyui-datagrid\u5982\u4f55\u901a\u8fc7ajax\u7ed1\u5b9a\u6570\u636e\uff08java\uff09

$.ajax({
method : 'GET',
url : 'https://bas.gimiscloud.com/api/crane/machinelist',
async : false,
dataType : 'json',
beforeSend : function(jqXHR) {
jqXHR.setRequestHeader('Authorization', 'Bearer '
+ '3feee5b76d8e698f4e5e29c626eb9dc2');
},
success : function(data) {
for ( var machine in data) {
alert(data[machine].name);
var a = [ {
'unid' : data[machine].unid,
'machine_name' : data[machine].name,
'machine_type' : data[machine].type,
'num_recoder' : data[machine].unid,
'work_state' : data[machine].online,
'update_time' : data[machine].date,
'moment' : data[machine].torque,
'load' : data[machine].capa,
'height' : data[machine].hook_height,
'range' : data[machine].radius,
'angle' : data[machine].angle,
'wind_speed' : data[machine].wind_velocity,
'dip_angle' : data[machine].obliquity,
'alarm_info' : data[machine].content
} ];
$('#dg_machine_list').datagrid('loadData', a);
}
},
error : function() {
alert('error');
}
});

\u2460\u9996\u5148\u80af\u5b9a\u9700\u8981\u6709\u4e00\u4e2atable\u6807\u7b7e\uff0c\u7ed9\u5b83\u5b9a\u4e49\u4e00\u4e2aid\uff0c\u5728js\u4e2d\u901a\u8fc7id.datagrid\u65b9\u6cd5\u5373\u53ef\u521b\u5efa\u8868\u683c

$('#tt').datagrid(options);

\u2461\u521b\u5efa\u8868\u683c\u7684\u5217\u540d\u6709\u4e24\u79cd\u65b9\u5f0f\uff1a\u7b2c\u4e00\u79cd\u662f\u76f4\u63a5\u5728table\u6807\u7b7e\u4e2d\u5b9a\u4e49\uff0c\u7b2c\u4e8c\u79cd\u662f\u5728js\u4e2d\u5b9a\u4e49\uff1a
\u6211\u4f7f\u7528\u7684\u662f\u7b2c\u4e00\u79cd\u65b9\u5f0f\uff1a

<table id="loginInfoTable"
title="\u7528\u6237\u4fe1\u606f\u4e00\u89c8"
border="0"
cellspacing="0"
cellpadding="0"
iconCls="icon-edit"
width="98%"
idField="loginId"
pagination="true"
remoteSort="false"
singleSelect="false"
showFooter="false"
striped="true"
url="/ospm/loginInfo/doLoginInfoSearch.jhtml">



\u7528\u6237\u540d
\u72b6\u6001
\u64cd\u4f5c




\u2462\u5411\u540e\u53f0\u8bf7\u6c42\u6570\u636e
datagrid\u6709\u4e00\u4e2a\u5c5e\u6027\u53eburl\uff0c\u5728\u8fdb\u5165\u9875\u9762\u540e\uff0c\u5b83\u4f1a\u901a\u8fc7ajax\u65b9\u5f0f\u5411\u540e\u53f0\u53d1\u9001\u8bf7\u6c42\uff0c\u540e\u53f0\u5c01\u88c5\u76f8\u5e94\u6570\u636e\uff08JSON\u683c\u5f0f\uff09\u518d\u8fd4\u56de\u7ed9\u524d\u53f0\u5373\u53ef\u663e\u793a\u3002\u6ce8\u610f\uff1adatagrid\u5728\u56de\u8c03\u51fd\u6570\u4e2d\u5fc5\u987b\u83b7\u5f97\u4e24\u9879json\u6570\u636e\uff1atotal\u8868\u793a\u67e5\u8be2\u51fa\u7684\u603b\u7ed3\u8fc7\uff0crows\u8868\u793a\u663e\u793a\u5728table\u4e2d\u7684\u6570\u636e\u96c6\u5408\u3002
/**
* \u5c01\u88c5Json\u6570\u636e
*/
long total = 0; // \u7b26\u5408\u67e5\u8be2\u7684\u603b\u6761\u6570
List lstTable = null; // \u67e5\u8be2\u7ed3\u679c
total = (Long) mapLoginInfo.get(Constant4Ospm.TOTAL);
if (mapLoginInfo.get(Constant4Ospm.SEARCH_RESULT) != null) {
lstTable = (List) mapLoginInfo
.get(Constant4Ospm.SEARCH_RESULT);
} else {
//\u6ce8\uff1a\u5982\u679c\u4ece\u6570\u636e\u5e93\u67e5\u8be2\u4e0d\u51fa\u6570\u636e\uff0c\u4e5f\u5fc5\u987b\u5c01\u88c5\u4e00\u4e2a\u7a7a\u7684json\u96c6\u5408\uff0c\u4e0d\u7136\u9875\u9762\u5c31\u4f1a\u62a5js\u9519\u8bef
lstTable = new ArrayList();
}
JSONObject datas = new JSONObject();
// \u8bbe\u7f6e\u603b\u5171\u6709\u591a\u5c11\u6761\u8bb0\u5f55
datas.put(Constant4Ospm.TOTAL, total);
// \u8bbe\u7f6e\u5f53\u524d\u9875\u7684\u6570\u636e
datas.put(Constant4Ospm.PAGE_SIZE, lstTable);

\u2463\u540e\u53f0\u6570\u636e\u4e0e\u8868\u683c\u5173\u8054
\u540e\u53f0\u8fc7\u6765\u7684\u6570\u636e\u600e\u4e48\u4e0e\u8868\u683c\u6bcf\u4e00\u5217\u5bf9\u5e94\u5462\uff1f\u5176\u5b9e\u5f88\u7b80\u5355\uff1a\u540e\u53f0rows\u4e2d\u5305\u542b\u4e86\u540d\u53ebLoginInfoTableDto\u7684javabean-json\u96c6\u5408\uff0cdatagrid\u7684field\u548cidField\u5bf9\u5e94LoginInfoTableDto\u4e2d\u7684\u4e00\u4e2a\u5c5e\u6027\uff08\u5927\u4f53\u4e0a\u662f\u8fd9\u6837\uff0c\u5f53\u7136field\u4e5f\u53ef\u4ee5\u4e0d\u5bf9\u5e94javabean\u7684\u5c5e\u6027\uff0c\u4f60\u53ef\u4ee5\u8fdb\u884c\u4e00\u4e9b\u8f6c\u6362\uff09\u3002

后台：

前台：

只需要将url绑定就好，他会自动获得你的数据，进行显示，希望能帮助到你

这个东西要查文档的
easyUI中的datagrid
json 打回来都是异步的 两种方式
div中声明 或者js 中注册 建议使用js

<table class="easyui-datagrid" style="width:400px;height:250px"

//这里的url要请求你的action

　　data-options="url:'datagrid_data.json',fitColumns:true,singleSelect:true">

<thead>

<tr>

<th data-options="field:'code',width:100">Code</th>

<th data-options="field:'name',width:100">Name</th>

<th data-options="field:'price',width:100,align:'right'">Price</th>

</tr>

</thead>

</table>

使用datagrid 的json串格式需要固定

{
"total":239,
"rows":[
{"code":"001","name":"Name 1","addr":"Address 11","col4":"col4 data"},
{"code":"002","name":"Name 2","addr":"Address 13","col4":"col4 data"},
{"code":"003","name":"Name 3","addr":"Address 87","col4":"col4 data"},
{"code":"004","name":"Name 4","addr":"Address 63","col4":"col4 data"},
{"code":"005","name":"Name 5","addr":"Address 45","col4":"col4 data"},
{"code":"006","name":"Name 6","addr":"Address 16","col4":"col4 data"},
{"code":"007","name":"Name 7","addr":"Address 27","col4":"col4 data"},
{"code":"008","name":"Name 8","addr":"Address 81","col4":"col4 data"},
{"code":"009","name":"Name 9","addr":"Address 69","col4":"col4 data"},
{"code":"010","name":"Name 10","addr":"Address 78","col4":"col4 data"}
]
}
rows 后面放你的list

页面上封装一个 对象
public pager{
private long total;
private List<?> rows;

}

把你的数据放到这个对象里 转json 就可以了祝你成功

扩展阅读：texas instruments ... e社研究所网站 ... lazada ... olivia ong ... 《vicious fantasy》 ... sigma koki ... paperpass免费入口 ... alien swarm ... www.paperpass.com ...