|
#
節(jié)點(diǎn)拖拽投放  參考示例：節(jié)點(diǎn)拖拽投放 創(chuàng)建代碼 <ul id="tree1" class="mini-tree" url="../data/tree.txt" style="width:200px;padding:5px;"
showTreeIcon="true" textField="text" idField="id"
allowDrag="true" allowDrop="true">
</ul>
- allowDrag：允許拖拽節(jié)點(diǎn)
- allowDrop：允許投放節(jié)點(diǎn)
多選樹：CheckBoxTree  參考示例：多選樹：CheckBoxTree 創(chuàng)建代碼 <ul id="tree2" class="mini-tree" url="../data/tree.txt" style="width:300px;"
showTreeIcon="true" textField="text" idField="id" showCheckBox="true"
onbeforenodecheck="onBeforeNodeCheck" checkRecursive="true" allowSelect="false" enableHotTrack="false">
</ul> - showCheckBox：顯示樹形的checkbox
- checkRecursive：決定是否聯(lián)動(dòng)選擇
設(shè)置多選tree.setValue("forms,button,lists");
獲取多選var value = tree.getValue();
alert(value);
樹操作：增加、刪除、修改、移動(dòng) 參考示例：增加、刪除、修改節(jié)點(diǎn) 增加節(jié)點(diǎn) var tree = mini.get("tree1");
var node = tree.getSelectedNode();
var newNode = {};
tree.addNode(newNode, "before", node);
刪除節(jié)點(diǎn) var node = tree.getSelectedNode();
tree.removeNode(node);
編輯節(jié)點(diǎn) var node = tree.getSelectedNode();
tree.beginEdit(node);
移動(dòng)節(jié)點(diǎn) tree.moveNode(node, targetNode, "before");
懶加載樹  參考示例：懶加載樹 創(chuàng)建代碼 <ul id="tree1" class="mini-tree" url="../data/TreeService.aspx?method=LoadNodes" style="width:300px;height:200px;padding:5px;"
showTreeIcon="true" textField="name" idField="id" onbeforeload="onBeforeTreeLoad"
>
</ul>
服務(wù)端返回?cái)?shù)據(jù)[{
id: "form",
text: "Form",
......
isLeaf: false, //是否葉子節(jié)點(diǎn)：+和-號(hào)
expanded: false //節(jié)點(diǎn)處于收縮狀態(tài)
},
......
]
其中，isLeft 說明此節(jié)點(diǎn)是否有下一級(jí)節(jié)點(diǎn)。expanded 表示此節(jié)點(diǎn)處于折疊狀態(tài)。 懶加載事件 當(dāng)用戶點(diǎn)擊"+"圖標(biāo)時(shí)，會(huì)自動(dòng)加載下一級(jí)節(jié)點(diǎn)，此時(shí)會(huì)把當(dāng)前節(jié)點(diǎn)id傳遞到后臺(tái)，也可以攔截加載事件，增加額外屬性： function onBeforeTreeLoad(e) {
var tree = e.sender; //樹控件
var node = e.node; //當(dāng)前節(jié)點(diǎn)
var params = e.params; //參數(shù)對(duì)象
//可以傳遞自定義的屬性
params.myField = "123"; //后臺(tái)：request對(duì)象獲取"myField"
}
服務(wù)端處理 服務(wù)端通過request獲取"id"屬性后，加載此節(jié)點(diǎn)的下一級(jí)節(jié)點(diǎn)數(shù)組，并通過JSON返回。 String id = Request["id"];
if (String.IsNullOrEmpty(id)) id = "-1";
//獲取下一級(jí)節(jié)點(diǎn)
String sql = "select * from plus_file where pid = '" + id + "' order by updatedate";
ArrayList folders = DBUtil.Select(sql);
//判斷節(jié)點(diǎn)，是否有子節(jié)點(diǎn)。如果有，則處理isLeaf和expanded。
for (int i = 0, l = folders.Count; i < l; i++)
{
Hashtable node = (Hashtable)folders[i];
String nodeId = node["id"].ToString();
String sql2 = "select * from plus_file where pid = '" + nodeId + "' order by updatedate";
ArrayList nodes = DBUtil.Select(sql2);
if (nodes.Count > 0)
{
node["isLeaf"] = false;
node["expanded"] = false;
}
}
//返回JSON
String json = PluSoft.Utils.JSON.Encode(folders);
Response.Write(json);
創(chuàng)建樹：Html生成 參考示例： 創(chuàng)建樹：Html生成 Html標(biāo)簽創(chuàng)建節(jié)點(diǎn) <ul id="tree2" class="mini-tree" style="width:200px;padding:5px;" showTreeIcon="true">
<li>
<span>MiniUI</span>
<ul>
<li>
<span expanded="false">Form</span>
<ul>
<li>ComboBox</li>
<li>DatePicker</li>
<li>Spinner</li>
<li>TreeSelect</li>
</ul>
</li>
<li>
<span expanded="false">Lists</span>
<ul>
<li><a href="../datagrid/datagrid.html" target="_blank" style="color:Blue;text-decoration:underline;">DataGrid</a></li>
<li>Tree</li>
</ul>
</li>
<li>
<span expanded="false">Layouts</span>
<ul>
<li>Panel</li>
<li>Splitter</li>
<li>Layout</li>
</ul>
</li>
<li>
<span expanded="false">Navigations</span>
<ul>
<li>Tabs</li>
<li>NavBar</li>
<li>Menu</li>
<li>Pager</li>
</ul>
</li>
</ul>
</li>
</ul>
創(chuàng)建樹：本地JSON 參考示例：創(chuàng)建樹：本地JSON 創(chuàng)建Tree 沒有設(shè)置url。 <ul id="tree3" class="mini-tree" style="width:300px;padding:5px;"
showTreeIcon="true" textField="text" idField="id" >
</ul>
Javascript設(shè)置數(shù)據(jù)var tree3 = mini.get("tree3");
tree3.loadData([
{ id: "lists", text: "Lists", expanded: false,
children: [
{ id: "datagrid", text: "DataGrid" },
{ id: "tree", text: "Tree" },
{ id: "treegrid", text: "TreeGrid " }
]
},
{ id: "layouts", text: "Layouts", expanded: false,
children: [
{ id: "panel", text: "Panel" },
{ id: "splitter", text: "Splitter" },
{ id: "layout", text: "Layout " }
]
},
{ id: "navigations", text: "Navigations", expanded: false,
children: [
{ id: "pager", text: "Pager" },
{ id: "tabs", text: "Tabs" },
{ id: "navbar", text: "NavBar" },
{ id: "menu", text: "Menu" }
]
}
]);
創(chuàng)建樹：列表結(jié)構(gòu)  參考示例： 列表數(shù)據(jù)生成Tree 創(chuàng)建Tree <ul id="tree1" class="mini-tree" url="../data/listTree.txt" style="width:200px;padding:5px;"
showTreeIcon="true" textField="text" idField="id" parentField="pid" resultAsTree="false"
>
</ul> 注意：idField、parentField、resultAsTree屬性。 數(shù)據(jù)結(jié)構(gòu)：列表 通過url返回的數(shù)據(jù)結(jié)構(gòu)如下： [
{id: "base", text: "Base", expanded: false},
{id: "ajax", text: "Ajax", pid: "base"},
{id: "json", text: "JSON", pid: "base"},
......
]
其中，id和pid對(duì)應(yīng)父子關(guān)系。
創(chuàng)建樹：樹形結(jié)構(gòu) 參考示例：Tree 樹形控件 創(chuàng)建Tree <ul id="tree1" class="mini-tree" url="../data/tree.txt" style="width:300px;padding:5px;"
showTreeIcon="true" textField="text" idField="id" >
</ul>
數(shù)據(jù)結(jié)構(gòu)：樹形 通過url返回的數(shù)據(jù)結(jié)構(gòu)如下： [
{id: "base", text: "Base", expanded: false,
children: [
{id: "ajax", text: "Ajax"},
{id: "json", text: "JSON"},
{id: "date", text: "Date"},
{id: "control", text: "Control"},
{id: "messagebox", text: "MessageBox"},
{id: "window", text: "Window"}
]
},
...
]
DataBinding：數(shù)據(jù)綁定 參考示例：DataBinding：數(shù)據(jù)綁定 數(shù)據(jù)綁定 數(shù)據(jù)綁定后：當(dāng)表格變化時(shí)，控件值跟隨變動(dòng)；控件值修改時(shí)，表格單元格內(nèi)容變動(dòng)。
最后使用表格的數(shù)據(jù)提交保存，達(dá)到：多次修改、一次保存的效果。 //綁定表單
var db = new mini.DataBinding();
db.bindForm("editForm1", grid);
//綁定控件
db.bindField(textbox, grid, "username");
表格：合并單元格  參考示例：合并單元格 調(diào)用方法：margeCells。如下代碼： grid.on("load", onLoad);
function onLoad(e) {
var grid = e.sender;
var marges = [
{ rowIndex: 1, columnIndex: 0, rowSpan: 1, colSpan: 2 },
{ rowIndex: 3, columnIndex: 0, rowSpan: 4, colSpan: 3 }
];
grid.margeCells(marges);
}
|