- 浏览: 227702 次
- 性别:
- 来自: 上海
最新评论
-
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");