Home > Developer > Web Develop
JQuery Miniui is an open source project from open source China, all rights reserved by Shanghai PU Software Co., Ltd:
Learning this, for how to design tables, tree catalogs, database additions and deletions and UI design learning is very helpful.
Here's a simple example:
The complete code for this section is given below:
<! 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>Adding, deleting, and modifying nodes</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>Adding, deleting, and modifying nodes</H1> <input type="button" value="Insert node (front)" onclick=" Onaddbefore () "/> <input type="button" value="Insert node (rear)" onclick ="Onaddafter ()"/> <input type="button" value="Insert node (child node)" onclick=" Onaddnode () "/> <input type="button" value="Save" onclick= "SaveData ()" style="margin-left:30px;font-weight:bold;" /> <br /> <input type="button" value="Edit Node" onclick=" Oneditnode () "/> <input type="button" value="Delete node" 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) { varTree = Mini.get ("Tree1");varnode = Tree.getselectednode ();varNewNode = {}; Tree.addnode (NewNode,"Before", node); } function onaddafter(e) { varTree = Mini.get ("Tree1");varnode = Tree.getselectednode ();varNewNode = {}; Tree.addnode (NewNode,"after", node); } function onaddnode(e) { varTree = Mini.get ("Tree1");varnode = Tree.getselectednode ();varNewNode = {}; Tree.addnode (NewNode,"Add", node); } function oneditnode(e) { varTree = Mini.get ("Tree1");varnode = Tree.getselectednode (); Tree.beginedit (node); } function onremovenode(e) { varTree = Mini.get ("Tree1");varnode = Tree.getselectednode ();if(node) {if(Confirm ("OK to delete selected nodes?") {Tree.removenode (node); } } } function onmovenode(e) { varTree = Mini.get ("Tree1");varnode = Tree.getselectednode (); Alert"MoveNode"); } function saveData() { varTree = Mini.get ("Tree1");vardata = Tree.getdata ();varJSON = Mini.encode (data); Alert"Online demo, do not provide save, download the development package has this feature. "); }</script> <div class="description"> <h3>Description</h3> <p> </P> </div></body></html>From the code can see that the contents of the tree directory is saved in a. txt file, only need to call from the data path, which is the same as the client-made tree directory is a principle, and the other, the code gives the JavaScript function database deletion and subtraction event response function, this part of the emphasis on strengthening learning.
JQuery MINIUI Study notes one
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
