JQuery MiniUI学习笔记一

来源：互联网发布：仓库存储储位优化编辑：程序博客网时间：2024/06/05 11:21

JQuery MiniUI来自开源中国的开源项目，由上海普加软件有限公司版权所有：
这里写图片描述
学习这个，对于如何设计表格、树形目录，数据库的增删改减以及UI设计的学习很有帮助。
下面来学习其中一个简单示例：

这里写图片描述

下面给出这部分的完整代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>    <title>增加、删除、修改节点</title>    <meta http-equiv="content-type" content="text/html; charset=UTF-8" /><link href="../demo.css" rel="stylesheet" type="text/css" />    <script src="../../scripts/boot.js" type="text/javascript"></script>    <link href="../../scripts/miniui/themes/blue/skin.css" rel="stylesheet" type="text/css" /></head><body>    <h1>增加、删除、修改节点</h1>          <input type="button" value="插入节点(前)" onclick="onAddBefore()"/>    <input type="button" value="插入节点(后)" onclick="onAddAfter()"/>    <input type="button" value="插入节点(子节点)" onclick="onAddNode()"/>    <input type="button" value="保存" onclick="saveData()" style="margin-left:30px;font-weight:bold;"/>    <br />    <input type="button" value="编辑节点" onclick="onEditNode()"/>    <input type="button" value="删除节点" onclick="onRemoveNode()"/>    <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"          allowDrag="true" allowDrop="true"         >    </ul>    <script type="text/javascript">        function onAddBefore(e) {            var tree = mini.get("tree1");            var node = tree.getSelectedNode();            var newNode = {};            tree.addNode(newNode, "before", node);        }        function onAddAfter(e) {            var tree = mini.get("tree1");            var node = tree.getSelectedNode();            var newNode = {};            tree.addNode(newNode, "after", node);        }        function onAddNode(e) {            var tree = mini.get("tree1");            var node = tree.getSelectedNode();            var newNode = {};            tree.addNode(newNode, "add", node);        }        function onEditNode(e) {            var tree = mini.get("tree1");            var node = tree.getSelectedNode();            tree.beginEdit(node);        }        function onRemoveNode(e) {            var tree = mini.get("tree1");            var node = tree.getSelectedNode();            if (node) {                if (confirm("确定删除选中节点?")) {                    tree.removeNode(node);                }            }        }        function onMoveNode(e) {            var tree = mini.get("tree1");            var node = tree.getSelectedNode();            alert("moveNode");        }        function saveData() {            var tree = mini.get("tree1");            var data = tree.getData();            var json = mini.encode(data);            alert("在线演示，不提供保存，下载开发包内有此功能。");        }    </script>    <div class="description">        <h3>Description</h3>        <p>                    </p>    </div></body></html>

从代码可以看出树形目录的内容保存在.txt文件中，只需要从数据路径调用即可，这与之前做客户端制作树形目录是一个原理，其二，代码中给出了JavaScript函数的数据库增删改减事件响应函数，这一部分要重点加强学习。

0 0