①首先肯定需要有一个table标签,给它定义一个id,在js中通过iddatagrid方法即可创建表格
<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/doLoginInfoSearchjhtml">
<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) mapLoginInfoget(Constant4OspmTOTAL);
if (mapLoginInfoget(Constant4OspmSEARCH_RESULT) != null) {
lstTable = (List<LoginInfoTableDto>) mapLoginInfo
get(Constant4OspmSEARCH_RESULT);
} else {
//注:如果从数据库查询不出数据,也必须封装一个空的json集合,不然页面就会报js错误
lstTable = new ArrayList<LoginInfoTableDto>();
}
JSONObject datas = new JSONObject();
// 设置总共有多少条记录
datasput(Constant4OspmTOTAL, total);
// 设置当前页的数据
datasput(Constant4OspmPAGE_SIZE, lstTable);
④后台数据与表格关联
后台过来的数据怎么与表格每一列对应呢?其实很简单:后台rows中包含了名叫LoginInfoTableDto的javabean-json集合,datagrid的field和idField对应LoginInfoTableDto中的一个属性(大体上是这样,当然field也可以不对应javabean的属性,你可以进行一些转换)。
您好,这样的:
首先,我们创建食品树,代码如下所示:
<div style="width:200px;height:auto;border:1px solid #ccc;">
<ul id="tt" class="easyui-tree" url="tree_datajson"></ul>
</div>
请注意,树(Tree)组件是定义在 <ul> 标记中,树节点数据从 URL "tree_datajson" 加载。
得到父节点
然后我们通过点击节点选择水果节点,我们将添加一些其他的水果数据。执行 getSelected 方法得到处理节点:
var node = $('#tt')tree('getSelected');
getSelected 方法的返回结果是一个 javascript 对象,它有一个 id、text、target 属性。target 属性是一个 DOM 对象,引用选中节点,它的 append 方法将用于附加子节点。
附加节点
var node = $('#tt')tree('getSelected');
if (node){
var nodes = [{
"id":13,
"text":"Raspberry"
},{
"id":14,
"text":"Cantaloupe"
}];
$('#tt')tree('append', {
parent:nodetarget,
data:nodes
});
}
以上就是关于easyui的datagrid怎么绑定数据库全部的内容,包括:easyui的datagrid怎么绑定数据库、easyui tree 怎么将数据库的某一字段的值作为树节点、等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)