❶ 大量数据的easyui tree后台怎样实现查询数据库
第一种直接使用<ul标签方式,很容易就加载出来了:1<ulclass="easyui-tree"2<li3<spanMy Documents</span4<ul5<li data-options="state:'closed'"6<spanPhotos</span7<ul8<li9<spanFriend</span10</li11<li12<spanWife</span13</li14<li15<spanCompany</span16</li17</ul18</li19<li20<spanProgram Files</span21<ul22<liIntel</li23<liJava</li24<liMicrosoft Office</li25<liGames</li26</ul27</li28<liindex.html</li29<liabout.html</li30<liwelcome.html</li31</ul32</li33</ul第二种,在js中绑定:<ulid="myTree"</ul
$('#myTree'
).tree({method:'get',
url:'tree_data1.json'});注意:easyui tree获取数据的HTTP方法默认是post,但是用post的时候却报了谓词错误, 所以指定了get ----》需要查查,还不了解因果。
三,用data直接绑json:
$.ajax({type:'GET',
url:'tree_data1.json',
success:function(result) {varmyJson = eval('(' + result + ')');$('#myTree'
).tree({data: myJson});}});这种方式绑定下面的这种json数据格式是有效的,但是方法二却绑不上:
[{ 'text':'.Net','state':'closed','children':[{'text':'C#'},{'text':'asp.Net'}]},{'text':'Java'}]
一般最好用双引号
❷ easyui tree easyui树的问题, 请问怎么从从数据库得到easyui tree 所需json数据的格式
从数据库中查询数据后是放在datatable中的,然后一条一条取数据,按照json数据格式拼字符串
❸ jquery easyui 树 怎么构造树形数据 从数据库里生成树的json数据
/*
* 组成前台所需要的JSON
*/
String [] columns1 = {"id", "name", "_parentId"}; //组成JSON所需要的列名,父结点必须命名为_parentId
StringBuffer returnStr = new StringBuffer("{\"total\":");
returnStr.append(list.size()); //list为sql查询结果集,里面也有3列,分别为id,name,parentId
returnStr.append(",\"rows\":[");
for (int i = 0; i < list.size(); i++) { // 遍历记录
if (i != 0) {
returnStr.append(",");
}
returnStr.append("{");
Object[] obj = (Object[]) list.get(i);
for (int j = 0; j < (obj.length - 1); j++) {
returnStr.append("\"" + columns[j] + "\":");
returnStr.append("\"" + obj[j] + "\",");
}
} else {
returnStr.append("\"" + columns[j] + "\":");
returnStr.append("\"" + obj[j] + "\"");
if (j != 2) {
returnStr.append(",");
}
}
}
returnStr.append("}");
}
returnStr.append("]}");
return returnStr; //返回组成好的JSON
❹ EasyUI tree绑定数据的几种方式
第一种直接使用<ul>标签方式,很容易就加载出来了:
class="code_img_closed" src="/Upload/Images/2013073018/0015B68B3C38AA5B.gif" alt="" />logs_code_hide('f6255e07-2992-44d7-8440-82bf2e943e6c',event)" src="/Upload/Images/2013073018/2B1B950FA3DF188F.gif" alt="" />
<ul id="tt" class="easyui-tree">
<li>
<span>编程语言</span>
<ul>
<li>
<span>C#</span>
<ul>
<li>
<span><a href="#">框架</a></span>
</li>
<li>
<span>Asp.Net</span>
</li>
<li>
<span>Winform</span>
</li>
</ul>
</li>
<li>
<span>Java</span>
</li>
<li>
<span>C++</span>
</li>
</ul>
</li>
<li>
<span>File21</span>
</li>
</ul>
View Code
第二种,在js中绑定:
<ul id="myTree"></ul>
$('#myTree').tree({
method: 'get',
url: 'tree_data1.json'
});
注意: tree获取数据的HTTP方法默认是post,但是用post的时候却报了谓词错误, 所以指定了get ----》需要查查,还不了解因果。
json的数据格式:
1 [{
2 "id":1,
3 "text":"My Documents",
4 "children":[{
5 "id":11,
6 "text":"Photos",
7 "state":"closed",
8 "children":[{
9 "id":111,
10 "text":"Friend"
11 },{
12 "id":112,
13 "text":"Wife"
14 },{
15 "id":113,
16 "text":"Company"
17 }]
18 },{
19 "id":12,
20 "text":"Program Files",
21 "children":[{
22 "id":121,
23 "text":"Intel"
24 },{
25 "id":122,
26 "text":"Java",
27 "attributes":{
28 "p1":"Custom Attribute1",
29 "p2":"Custom Attribute2"
30 }
31 },{
32 "id":123,
33 "text":"Microsoft Office"
34 },{
35 "id":124,
36 "text":"Games",
37 "checked":true
38 }]
39 },{
40 "id":13,
41 "text":"index.html"
42 },{
43 "id":14,
44 "text":"about.html"
45 },{
46 "id":15,
47 "text":"welcome.html"
48 }]
49 }]
View Code
直接 的有点长
三,用data直接绑json:
$.ajax({
type: 'GET',
url: 'tree_data1.json',
success: function (result) {
var myJson = eval('(' + result + ')');
$('#myTree').tree({
data: myJson
});
}
});
这种方式绑定下面的这种json数据格式是有效的,但是方法二却绑不上:
❺ EasyUi Tree 怎么绑定自己的数据字段。tree 的demo给的是id 和 text ,怎么把别的查询字段绑定到这两个上
var convertTreeData = function(rows) {
var nodes = [];
for(var i=0; i<rows.length; i++){
var row = rows[i];
nodes.push({
id:row.XX, // 这里绑定你的字段
text:row.XX // 这里绑定你的字段
state:row.XX,// 这里绑定你的字段
checked:row.checked,// 这里绑定你的字段
attributes:row.attributes// 这里绑定你的字段
});
}
return nodes;
}
$.fn.tree.defaults.loadFilter = convertTreeData;
❻ 怎么通过js获得easyui下一个treegrid的数据源
var tab = $('#tt').tabs('getTab',0); // 取得第一个tab $('#tt').tabs('update', { tab: tab, options: { title: 'New Title' } });
❼ easyui combotree 绑定数据源
根据html里面input的id或者select的id绑定就好了,这哪里有问题吗?
❽ easyui tree 根据搜索框模糊搜索节点具体代码怎样实现
1.在系统启动时,会默认加载若干个树节点数据(因为我的树的数据量比较大,所以内不是一次性容把数据全部加载完,而是用户点击展开某个节点时,
再去数据库加载相应节点的数据,如果是数据量比较小的话, 可以将所有节点一次性加载完成,在这个的基础上做搜索定位会简单很多)
2.当用户输入某个要定位节点的名称之后,我会去数据库中进行模糊匹配,找出该名称的节点可能为哪些个。如果只匹配到一个则直接定位,
如果匹配了多个,则将这些节点的详细信息展示出来,让用户自己选择去定位具体的哪一个节点。
3.当用户选择定位某个节点后,再去数据库中查找相关的节点信息。
4.在查询出这些数据之后,我会将树的原来的数据源给替换成要定位的数据也是数据data
5.在对树的数据源进行更新处理之后,只需要将指定的节点展开,然后将定位设置为选中状态并让其处于当前窗口的视野范围内就达到了搜索定位的效果。
当用户单击查询按钮时,把输入框的值传入到控制器,让后台处理得到 输入值的父节点(也许父节点任有父节点,所以要把全部的上级都给查出来)
然后根据最高级节点依次展开,这样就实现了我的搜索功能!
❾ easyui datagrid loadFilter怎么条件过滤数据
给你一个我写好的分页方法:
functionpagerFilter(data){//分页事件
if(typeofdata.length=='number'&&typeofdata.splice=='function'){ //isarray
data={
total:data.length,
rows:data
}
}
vardg=$(this);
varopts=dg.datagrid('options');
varpager=dg.datagrid('getPager');
pager.pagination({
onSelectPage:function(pageNum,pageSize){
dg.datagrid('loading');
setTimeout(function(){
opts.pageNumber=pageNum;
opts.pageSize=pageSize;
pager.pagination('refresh',{
pageNumber:pageNum,
pageSize:pageSize
});
dg.datagrid('loadData',data);
},1);
},
onChangePageSize:function(pageSize){
vardgID=dg.attr("id");
$.cookie(dgID,pageSize,{expires:365});
}
});
if(!data.originalRows){
data.originalRows=(data.rows);
}
if(!opts.remoteSort&&opts.sortName){
vartarget=this;
varnames=opts.sortName.split(',');
varorders=opts.sortOrder.split(',');
data.originalRows.sort(function(r1,r2){
varr=0;
for(vari=0;i<names.length;i++){
varsn=names[i];
varso=orders[i];
varcol=$(target).datagrid('getColumnOption',sn);
varsortFunc=col.sorter||function(a,b){
returna==b?0:(a>b?1:-1);
};
r=sortFunc(r1[sn],r2[sn])*(so=='asc'?1:-1);
if(r!=0){
returnr;
}
}
returnr;
});
}
varmaxPage=Math.ceil(data.originalRows.length/parseInt(opts.pageSize));
maxPage=maxPage==0?1:maxPage;
opts.pageNumber=maxPage<opts.pageNumber?maxPage:opts.pageNumber;
varstart=(opts.pageNumber-1)*parseInt(opts.pageSize);
varend=start+parseInt(opts.pageSize);
data.rows=(data.originalRows.slice(start,end));
returndata;
}
$("#grid").datagrid({
.....前面的属性略
loadFilter:pagerFilter
});
其实吧,我觉得,反正我用的时候,所有的Grid都是需要这个分页方法的。所以,我就直接把grid的默认值改掉。这样,就不用每个grid都去绑定loadFilter了。
if($.fn.datagrid){
$.fn.datagrid.defaults.loadFilter=pagerFilter;//分页事件
}
希望能帮到你。