nikofan
- 浏览: 228437 次
- 性别:
- 来自: 上海
-
最新评论
-
pealing1985：
受教了，，不知道实际的开发中 jquery ui 用的多吗。。 ...
jQuery MiniUI 开发教程 树形控件 树操作：增加、删除、修改、移动（六） -
nikofan：
IE6下没有问题
jQuery MiniUI 开发教程 表格控件 表格编辑：表单编辑（十二） -
hgztx：
这个系列的控件对IE6 的支持怎么样？有没有试过会有内存溢出的 ...
jQuery MiniUI 开发教程 表格控件 表格编辑：表单编辑（十二） -
jacking124：
这个用起来怎么样了，！！
jQuery MiniUI 开发教程 表格控件 表格：过滤行（七） -
masuweng：
界面、按钮都不错！
jQuery MiniUI 开发教程 表单控件 表单：控件尺寸调整（四）
文章列表
TreeGrid
参考示例： TreeGrid
创建TreeGrid
<div id="treegrid1" class="mini-treegrid" style="width:600px;height:280px;"
url="../data/tasks.txt" showTreeIcon="true"
treeColumn="taskname" idField="UID" parentField=" ...
过滤树
参考示例： 过滤树
filter节点过滤
tree.filter(function (node) {
var text = node.text ? node.text.toLowerCase() : "";
if (text.indexOf(key) != -1) {
return true;
}
});
clearFilter取消过滤
tree.clearFilter();
树右键菜单
参考示例：树右键菜单
一：创建ContextMenu
<ul id="treeMenu" class="mini-contextmenu" onbeforeopen="onBeforeOpen">
<li iconCls="icon-move" onclick="onMoveNode">移动节点</li>
<li class="separator"></li>
...
自定义节点
参考示例：自定义节点
创建代码
<ul id="tree1" class="mini-tree" url="../data/tree.txt" style="width:200px;padding:5px;"
showTreeIcon="true" textField="text" idField="id"
ondrawnode="onDrawNode" showCheckBox="t ...
节点拖拽投放
参考示例：节点拖拽投放
创建代码
<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" ...
多选树：CheckBoxTree
参考示例：多选树：CheckBoxTree
创建代码
<ul id="tree2" class="mini-tree" url="../data/tree.txt" style="width:300px;"
showTreeIcon="true" textField="text" idField="id" showCheckBox="true"
onbeforenodeche ...
树操作：增加、删除、修改、移动
参考示例：增加、删除、修改节点
增加节点
var tree = mini.get("tree1");
var node = tree.getSelectedNode();
var newNode = {};
tree.addNode(newNode, "before", node);
删除节点
var node = tree.getSelectedNode();
tree.removeNode(node);
编辑节点
var node = tree.getSelectedNode();
tre ...
懒加载树
参考示例：懒加载树
创建代码
<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="onB ...
创建树：Html生成
参考示例：创建树：Html生成
Html标签创建节点
<ul id="tree2" class="mini-tree" style="width:200px;padding:5px;" showTreeIcon="true">
<li>
<span>MiniUI</span>
<ul>
<li>
<span expand ...
创建树：本地JSON
参考示例：创建树：本地JSON
创建Tree
没有设置url。
<ul id="tree3" class="mini-tree" style="width:300px;padding:5px;"
showTreeIcon="true" textField="text" idField="id" >
</ul>
Javascript设置数据
var tree3 = mini.get("tree ...
创建树：列表结构
参考示例： 列表数据生成Tree
创建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=&qu ...
创建树：树形结构
参考示例：Tree 树形控件
创建Tree
<ul id="tree1" class="mini-tree" url="../data/tree.txt" style="width:300px;padding:5px;"
showTreeIcon="true" textField="text" idField="id" >
</ul>
数据结构：树形
通过url返回的数据结构如下：
...
DataBinding：数据绑定
参考示例：DataBinding：数据绑定
数据绑定
数据绑定后：当表格变化时，控件值跟随变动；控件值修改时，表格单元格内容变动。
最后使用表格的数据提交保存，达到：多次修改、一次保存的效果。
//绑定表单
var db = new mini.DataBinding();
db.bindForm("editForm1", grid);
//绑定控件
db.bindField(textbox, grid, "username");
表格：合并单元格
参考示例：合并单元格
调用方法：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.margeCell ...
表格：分组
参考示例：分组
调用分组方法：groupBy。如下代码：
grid.groupBy("gender", "asc");