JQueryEasyUi（Tree树）详解（转）
第⼀讲：JQuery Easy Ui到底是什么呢？
⾸先咱们知道JQuery是对Java Script的封装，是⼀个js库，主要提供的功能是选择器，属性修改和事件绑定等等。。JQuery ui是在jQuery的基础上，利⽤jQuery的扩展性，设计的插件。
那么JQuery Easy Ui到底是什么呢？
我的理解就是⽐JQuery ui更强⼤，同样都是实现绚丽的多功能效果！
jQuery Easy UI的⽬的就是帮助Web开发者更轻松的打造出功能更丰富并且更美观的UI界⾯。
当然JQuery Easy ui提供了⽤于创建跨浏览器⽹页的完整的组件集合，
包括功能强⼤的 datagrid（数据⽹格）、treegrid（树形表格）、 panel（⾯板）、combo（下拉组合）等等。
⽤户可以组合使⽤这些组件，也可以单独使⽤其中⼀个。
其实就这么简单，对某个事物的定义，个⼈感觉没有什么固定的答案，只是那种答案更⽅便你的记忆，
你记住的，它存在你深深的脑海⾥的，便是答案！
JQuery Easy Ui插件列表如下：
div中的文字水平居中分类插件
Base（基础）Parser 解析器Easyloader 加载器Draggable 可拖动Droppable 可放置Resizable 可调整尺⼨Pagination 分页Searchbox 搜索框Progressbar 进度条Tooltip 提⽰框
Layout（布局）Panel ⾯板
Tabs 标签页/选项卡Accordion 折叠⾯板Layout 布局
mysql一级缓存和二级缓存Menu（菜单）与 Button（按钮）Menu 菜单Linkbutton 链接按钮Menubutton 菜单按钮Splitbutton 分割按钮
Form（表单）Form 表单
Validatebox 验证框Combo 组合Combobox 组合框Combotree 组合树Combogrid 组合⽹格Numberbox 数字框Datebox ⽇期框Datetimebox ⽇期时间框Calendar ⽇历
Spinner 微调器Numberspinner 数值微调器Timespinner 时间微调器Slider 滑块
Window 窗⼝
Window（窗⼝）Window 窗⼝Dialog 对话框Messager 消息框
DataGrid（数据⽹格）与Tree（树）Datagrid 数据⽹格Propertygrid 属性⽹格Tree 树
Treegrid 树形⽹格
但是今天咱们只针对Tree（树）连接数据进⾏讲解！
下⾯是它的⼀些基本的属性：
id: 绑定到节点的标识值；
text：显⽰⽂本；
iconCls: 显⽰icon的css样式；
checked: 节点是否选中；
state: 节点状态, 'open' 或者 'closed'；
attributes: 绑定到节点的⾃定义属性；
target: ⽬标 DOM 对象；
children: ⼀个节点数组，定义⼀些⼦节点。
特性
名称类型说明默认值
url string获取远程数据的 URL 。null
method string获取数据的 http method 。post
animate boolean定义当节点展开折叠时是否显⽰动画效果。false
checkbox boolean定义是否在每个节点前边显⽰ checkbox 。false
css笔记
cascadeCheckboolean定义是否级联检查。true
onlyLeafCheckboolean定义是否只在叶节点前显⽰ checkbox 。false
dnd boolean定义是否启⽤拖放。false
data array加载的节点数据。null
jquery下载文件进度条事件
名称参数说明
onClick node当⽤户点击⼀个节点时触发， node 参数包含下列特性： id：节点的 id text：节点的⽂字 checked：节点是否被选中 attributes：节点⾃定义属性 target：被点击⽬标的 DOM 对象
onDblClick node当⽤户双击⼀个节点时触发。
onBeforeLoad node,
param当加载数据的请求发出前触发，返回 false 就取消加载动作。
onLoadSuccess node, data当数据加载成功时触发。
onLoadError arguments当数据加载失败时触发， arguments 参数与 jQuery.ajax 的'error' 函数⼀样。. onBeforeExpand node节点展开前触发，返回 false 就取消展开动作。
onExpand node当节点展开时触发。
onBeforeCollapsenode节点折叠前触发，返回 false 就取消折叠动作。
onCollapse node当节点折叠时触发。
onCheck node,
checked当⽤户点击 checkbox 时触发。
onBeforeSelect node节点被选中前触发，返回 false 就取消选择动作。onSelect node当节点被选中时触发。
onContextMenu e, node当右键点击节点时触发。
onDrop target,
source，当节点被拖拽施放时触发。 target：DOM 对象，拖放的⽬标节点。 source：源节点。 point：
表⽰拖放操
onDrop source,
point 当节点被拖拽施放时触发。 target：DOM 对象，拖放的⽬标节点。 source：源节点。 point：表⽰拖放操作，可能是值是： 'append'、'top' 或 'bottom'。
onBeforeEdit node编辑节点前触发。
onAfterEdit node编辑节点后触发。
onCancelEdit node当取消编辑动作时触发。
⽅法
名称参数说明
options none返回树的 options。
loadData data加载树的数据。
getNode target获取指定的节点对象。
getData target获取指定的节点数据，包括它的⼦节点。
reload target重新加载树的数据。
getRoot none获取根节点，返回节点对象。
getRoots none获取根节点们，返回节点数组。
getParent target获取⽗节点， target 参数指节点的 DOM 对象。
getChildren target获取⼦节点， target 参数指节点的 DOM 对象。
getCheckednone获取所有选中的节点。
getSelectednone获取选中的节点并返回它，如果没有选中节点，就返回 null。
isLeaf target把指定的节点定义成叶节点， target 参数表⽰节点的 DOM 对象。
find id到指定的节点并返回此节点对象。
select target选中⼀个节点， target 参数表⽰节点的 DOM 对象。
check target把指定节点设置为勾选。
uncheck target把指定节点设置为未勾选。
collapse target折叠⼀个节点， target 参数表⽰节点的 DOM 对象。
expand target展开⼀个节点， target 参数表⽰节点的 DOM 对象。
collapseAll target折叠所有的节点们。
expandAll target展开所有的节点们。
expandTo target从指定节点的根部展开。
append param追加⼀些⼦节点们到⼀个⽗节点， param 参数有两个特性： parent：DOM 对象，追加到的⽗节点，如果没有分配，则追加为根节点。 data：数组，节点们的数据。
toggle target切换节点的展开/折叠状态， target 参数表⽰节点的 DOM 对象。
insert param在指定节点的前边或后边插⼊⼀个节点， param 参数包含下列特性： before：DOM 对象，前边插⼊的节点。 after：DOM 对象，后边插⼊的节点。 data：对象，节点数据。
键盘按键失灵怎么办remove target移除⼀个节点和它的⼦节点们， target 参数表⽰节点的 DOM 对象。
pop target弹出⼀个节点和它的⼦节点们，此⽅法和 remove ⼀样，但是返回了移除的节点数据。
update param跟⼼指定的节点， param 参数有下列特性： target（DOM 对象，被更新的节点）、id、text、iconCls、checked、等等。
enableDnd none启⽤拖放功能。
disableDnd none禁⽤拖放功能。
beginEdit nodeEl开始编辑节点。
endEdit nodeEl结束编辑节点。
cancelEdit nodeEl取消编辑节点。
下⾯有具体的Demo给⼤家更直观的理解！
既然咱们知道了JQuery Easy ui是什么了，那它到底怎么⽤那？
试想⼀下？咱们怎么⽤的JQuery?不就是引⽤了它的JS库吗？
JQuery Easy ui也不例外，引⽤了它相关的JS库，咱们便能驾驭它了。
切记：引⽤的顺序不能颠倒，否则实现不了咱们想象的效果！
好了，下⾯就来看⼀下，引⽤JQuery Easy ui的js库时，顺序到底是怎样的呢？
第⼆讲：引⽤JQuery Easy ui的JS库顺序（凡事有先后）
引⽤顺序如下：
1：⾸先引⽤JQuery的核⼼库
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
2：引⼊ EasyUI 核⼼ UI ⽂件 CSS，我的jquery-easyui版本是1.2.6
<link rel="stylesheet" href="jquery-easyui-1.2.6/themes/default/easyui.css" type="text/css"/>
3：引⼊ EasyUI 图标⽂件
<link rel="stylesheet" href="jquery-easyui-1.2.6/themes/icon.css" type="text/css"/>
4：引⼊ jQuery EasyUI 核⼼库
<script type="text/javascript" src="jquery-easyui-1.2.6/jquery.easyui.min.js"></script>
5：咱们是伟⼤的中国⼈，所以要引⼊ EasyUI 中⽂提⽰信息<script type="text/javascript" src="jquery-easyui-1.2.6/locale/easyui-lang-zh_CN.js"></script>
这个顺序，不要颠倒啊！错了，后果⾃负哦！亲！
为了给⼤家⼀个更深刻的印象，咱们来写⼀个例⼦，以便于⼤家更好的消化和理解！
咱们这个例⼦就以Tree(树)来进⾏！
废话不多说，直接上代码#24 哈哈我⼜笑了！
第三讲：Tree（树）（我的⼼情谁能懂？）
我的步骤，很详细，希望同志们认真看，肯定都能看懂，看明⽩！谢谢！
第⼀步：创建⼀个MVC项⽬，具体实现看图！
点击确定后的效果图如下：
点击确定后的效果图如下：
第⼆步：创建控制器和对应的试图：
具体步骤看下图：
点击添加后的效果图如下：
点击添加后的效果图如下：
点击添加后的效果图如下：
点击添加后咱们的控制器和试图就创建完毕了。
第三步：创建数据库实体模型
同志们：咱们要实现和数据库交互，⾸先数据库得有吧。
咱们得在咱们的MVC项⽬中创建出数据库的实体模型吧！
关于怎么创建数据库，我在这⾥就不⼀⼀讲解了，但是，⼜怕有些同志不是很清楚，我就乐此不疲的再给⼤家截图，
只要读者有收获，我的努⼒就没⽩费！
知识本⾝就是⽤来分享的！
数据库那边的效果图如下：
下⾯是数据表中的数据：
以上两个图⽚就是数据库那边的基本信息了，
同志们只需要知道，咱们已经有需要交互的数据库就⾏了，下⾯咱们开始来看看：
怎么才能与数据库产⽣交互那？
怎么才能创建数据库实体模型那？
具体实现看下图：
点击新建项后的效果图如下：
点击添加后的效果图如下：
regular script
点击下⼀步后的效果图如下：
点击新建连接后的效果图如下：
温馨提⽰：
不要点击服务器名框中的↓按钮，
我反正是⼀点就卡，在此提醒下同志们，
直接在框中输⼊  . （点）就OK！
具体填写如下图：
点击确定后的效果图如下：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。