easyui 進階之tree easyui 進階之表單校驗、自定義校驗
阿新 • • 發佈：2018-11-30
前言
easyui是一種基於jQuery的使用者介面外掛集合，它為建立現代化，互動，JavaScript應用程式，提供必要的功能，完美支援HTML5網頁的完整框架，節省網頁開發的時間和規模。非常的簡單易學。
easyui中文網：http://www.jeasyui.net/
easyui官網：http://www.jeasyui.com/documentation/#
今天我們來學習tree
正文
一、 載入樹
1.靜態介面載入樹
在html直接載入資料，直接寫死的頁面
<div class="easyui-panel" style="padding:5px"> <ul class="easyui-tree"> <li> <span>My Documents</span> <ul> <li data-options="state:'closed'"> <span>Photos</span> <ul> <li> <span>Friend</span> </li> <li> <span>Wife</span> </li> <li> <span>Company</span> </li> </ul> </li> <li> <span>Program Files</span> <ul> <li>Intel</li> <li>Java</li> <li>Microsoft Office</li> <li>Games</li> </ul> </li> <li>index.html</li> <li>about.html</li> <li>welcome.html</li> </ul> </li> </ul> </div>
效果圖：
2.載入可編輯的樹
<div class="easyui-panel" style="padding:5px">
<ul id="tt" class="easyui-tree" data-options="
url: 'tree_data1.json',
method: 'get',
animate: true,
onClick: function(node){
$(
可使用 javascript 載入資料。
$('#tt').tree({
data：[{
"id":1,
"text":"Folder1",
"iconCls":"icon-save",
"children":[{
"text":"File1",
"checked":true
},{
"text":"Books",
"state":"open",
"attributes":{
"url":"/demo/book/abc",
"price":100
},
"children":[{
"text":"PhotoShop",
"checked":true
},{
"id": 8,
"text":"Sub Bookds",
"state":"closed"
}]
}]
},{
"text":"Languages",
"state":"closed",
"children":[{
"text":"Java"
},{
"text":"C#"
}]
}]
});
3.載入在節點上顯示額外資訊的樹
<div class="easyui-panel" style="padding:5px">
<ul class="easyui-tree" data-options="
url:'tree_data1.json',
method:'get',
animate:true,
formatter:function(node){
var s = node.text;
if (node.children){
s += ' <span style=\'color:blue\'>(' + node.children.length + ')</span>';
}
return s;
}
">
</ul>
</div>
如圖
4.用js載入樹
引用
<ul id="tree"></ul>
js程式碼
$('#tree').tree({
data:[{
text: 'Item1',
state: 'closed',
children: [{
text: 'Item11'
},{
text: 'Item12'
}],
onSelect: function(node){
console.log('選中的樹的節點資訊');
console.log(node);
} });
5.載入非同步樹
建立樹形選單（Tree）
<ul id="tt" class="easyui-tree"
url="tree2_getdata.php">
</ul>
伺服器端程式碼
$id = isset($_POST['id']) ? intval($_POST['id']) : 0;
include 'conn.php';
$result = array();
$rs = mysql_query("select * from nodes where parentId=$id");
while($row = mysql_fetch_array($rs)){
$node = array();
$node['id'] = $row['id'];
$node['text'] = $row['name'];
$node['state'] = has_child($row['id']) ? 'closed' : 'open';
array_push($result,$node);
}
echo json_encode($result);
function has_child($id){
$rs = mysql_query("select count(*) from nodes where parentId=$id");
$row = mysql_fetch_array($rs);
return $row[0] > 0 ? true : false;
}
二，樹的屬性、方法
官網api
http://www.jeasyui.com/documentation/#
三、常見樹操作
1.重新載入樹
$("#tree").tree({data:you_data});
$("#tree").tree("loadData",you_data);
2.定義顯示節點文字
$('#tt').tree({
formatter:function(node){
return node.text;
}
});
3.點選事件觸發
$('#tt').tree({
onClick: function(node){
alert(node.text); // alert node text property when clicked
}
});
4.為樹新增右鍵選單
// 為選單樹增加右鍵選單
$('#tree').tree({
onContextMenu: function(e, node){
e.preventDefault();
// select the node
$('#tree').tree('select', node.target);
// display context menu
$('#mm').menu('show', {
left: e.pageX,
top: e.pageY
});
}
});
樹節點
<ul id="tree"></ul>
右鍵選單內容
<div id="mm" class="easyui-menu" style="width:120px;">
<div onclick="add_save.add();" data-options="iconCls:'icon-add'">新增子選單</div>
<div onclick="menuEdit();" data-options="iconCls:'icon-edit'">編輯選單</div>
<div onclick="add_save.remove();" data-options="iconCls:'icon-remove'">刪除</div>
</div>
5.獲取選中的節點
var menu = $('#Tree').tree('getSelected');
var nodes = $('#tree').tree('getChecked');
狀態可用值有：'checked'、'unchecked'、'indeterminate'。如果狀態未分配，則返回 'checked' 節點。
6.追加子節點
資料最好動態載入
var selected = $('#tree').tree('getSelected');
$('#tt').tree('append', {
parent: selected.target,
data: [{
id: 23,
text: 'node23'
},{
text: 'node24',
state: 'closed',
children: [{
text: 'node241'
},{
text: 'node242'
}]
}]
});
7.在指點節點前或後新增一個節
before：DOM 物件，前邊插入的節點。
after：DOM 物件，後邊插入的節點。
data：物件，節點資料。
//在節點之前新增一個節點
var node = $('#tree').tree('getSelected');
if (node){
$('#tt').tree('insert', {
before: node.target,
data: {
id: 21,
text: 'node text'
}
});
}
8.更新指定節點的引數
// update the selected node text
var node = $('#tree').tree('getSelected');
if (node){
$('#tt').tree('update', {
target: node.target,
text: 'new text'
});
}
9.啟動拖拽
示例：
//onBeforeDrop:在節點被放置之前觸發，返回 false 則禁止放置。
onBeforeDrop:function(target,source){ var targetNode = $(this).tree('getNode',target); console.log("目標節點ID："+targetNode.id); },
//啟動拖拽屬性
$("#MenuTree").tree({
dnd:true});
10.樹的迭代
在開發過程中，很多時候後臺的資料不是我們樹載入想要的資料，我們可以通過迭代來編輯資料，
示例：
原資料（後面統一用you_data表示）
[{
"id": 1,
"state": "closed",
"children": [{
"id": 11,
},{
"id": 12,
}]
},{
"id": 2,
"state": "closed"
}]
我們可以發現數據中沒有taxt屬性，也就沒有要顯示的文字。。tree是看不到的，我們通過迭代操作加載出資料
//樹
$('#Tree').tree({ data: you_data, onSelect: function(node){ console.log('選中的樹的節點資訊'); console.log(node);
} });
//迭代迴圈
var oldData = [];
if(res){
oldData=you_data;
for(var i in oldData){
//迭代方法呼叫
readTree(oldData[i],oldData);
}
}
//為選單樹新增text
function readTree(node,data){
var children = node.children;
if(node.name){
node.text=node.id;
}
if(children&&children.length==0)delete node.children;
if (children && children.length) {
node.state = "closed";
for (var i = 0; i < children.length; i++) {
readTree(children[i],data);
}
}else{
return data;
}
};
$("#MenuTree").tree({data:res.data});
操作完以後我們的資料為
[{
"id": 1,
"text": "1",
"state": "closed",
"children": [{
"id": 11,
"text": "11"
},{
"id": 12,
"text": "12"
}]
},{
"id": 2,
"text": "2",
"state": "closed"
}]
相關文章
easyui 進階之表單校驗、自定義校驗
歡迎大家關注公眾號，不定時乾貨，只做有價值的輸出
作者：Dawnzhang
出處：https://www.cnblogs.com/clwydjgs/p/10043216.html