做网站找图片,石家庄规划,手机网站哪些功能,网络建站技术为什么80%的码农都做不了架构师#xff1f; 《j2ee 简单网站搭建#xff1a;#xff08;一#xff09; windows 操作系统下使用 eclipse 建立 maven web 项目》《j2ee 简单网站搭建#xff1a;#xff08;二#xff09;添加和配置 spring spring-mvc 的… 为什么80%的码农都做不了架构师 《j2ee 简单网站搭建一 windows 操作系统下使用 eclipse 建立 maven web 项目》《j2ee 简单网站搭建二添加和配置 spring spring-mvc 的 mvc 开发环境》《j2ee 简单网站搭建三在搭建好的 spring maven web 项目中加入 mybatis 访问数据库》《j2ee 简单网站搭建四将 freemaker 模板引擎作为 spring-mvc 展现层》《j2ee 简单网站搭建五使用 jcaptcha 生成验证码图片》《j2ee 简单网站搭建六使用 hibernate validation 实现 domain 层实体类验证》《j2ee 简单网站搭建七使用 shiro 结合 jcaptcha 实现用户验证登录》《j2ee 简单网站搭建八使用 jquery-validate 实现页面验证入门》《j2ee 简单网站搭建九jquery datatables jquery ui dialog 插件使用入门》《j2ee 简单网站搭建十jquery ztree 插件使用入门》《j2ee 简单网站搭建十一ckeditor 控件使用入门》 ztree 版本 v3.5.28 一 从官方网站下载 ztree 的 css 和 js 文件引入项目的 web 目录中 网站地址 http://www.treejs.cn/v3/main.php#_zTreeInfo 二 在 html 页面 head 标签中加入 css 文件 !-- zTree CSS --
link relstylesheet href你的文件路径/metroStyle.css typetext/css 三 在 html 页面 body 标签内添加绑定 ztree 插件的 ul 标签本例中 ul 标签的 id 设置为 categorytree ul idcategorytree classztree stylewidth: 100%/ul 四 在 html 页面 /body 标签内添加绑定 ztree 插件 js 文件以及 javascript 代码 script typetext/javascript src你的文件路径/jquery.ztree.core.min.js/script
script typetext/javascript src你的文件路径/jquery.ztree.excheck.js/script
script typetext/javascript src你的文件路径/jquery.ztree.exedit.js/script!-- Page-Level Demo Scripts - Tables - Use for reference --
scriptvar zTree $.fn.zTree.getZTreeObj(categorytree); // 获得树对象// zTree 的参数配置深入使用请参考 API 文档setting 配置详解var setting {view : {selectedMulti: false, // 取消多选addHoverDom: addHoverDom, // 鼠标选中后显示增、改按钮removeHoverDom: removeHoverDom // 鼠标移除后显示增、改按钮},data :{ // 设置节点的属性值以及从服务端传送过来的数据向节点绑定的参数值simpleData : {enable : true,idKey : id, // 绑定服务端传过来的 id 参数pIdKey : pid, // 绑定服务端传过来的 pid 参数rootPid : 0, // 根节点的父节点 id 值status : status // 绑定服务端传过来的 status 参数}},edit : { // 对节点编辑时进行的设置enable : true, // 允许编辑showRemoveBtn : false, // 是否显示 删除节点 按钮showRenameBtn : true, // 是否显示 修改节点内容 按钮renameTitle : 修改, // 如果显示 修改节点内容 按钮后按钮上的文字显示啥editNameSelectAll : true, // 编辑节点名称的时候是否对名称文字全选// drag : { // 是否允许节点拖拽放置、复制、移动// autoExpandTrigger : false,// isCopy : false,// isMove : false// }},callback: { // 设置所有的回调函数onRename: onRename, // 修改时调用onDrop: onDrop // 拖拽}};// zTree 的数据属性深入使用请参考 API 文档zTreeNode 节点数据详解$(document).ready(function() {var zNodes;$.ajax({ // 需要调用同步方法因此不能使用post方法此处加载整棵树type:POST,async:false,url:get_category_tree, // 服务端获得数据的方法dataType : json,data:null,success:function(result){ // 调用成功对节点进行设置if (result ! null result.status true)zNodes result.data;}});zTree $.fn.zTree.init($(#categorytree), setting, zNodes); // 初始化树对象});function addHoverDom(treeId, treeNode) { // 在鼠标移动到节点上方时显示对节点的操作按钮并对按钮绑定处理方法var sObj $(# treeNode.tId _span); // 获得鼠标所在的节点对象if (treeNode.editNameFlag || $(#addBtn_treeNode.tId).length0 || $(#startBtn_treeNode.tId).length0) return; // 如果鼠标所在的节点正在编辑或者添加按钮已存在则以下不执行var addStr span classbutton add idaddBtn_ treeNode.tId title添加 onfocusthis.blur();/span; // 动态生成新增按钮var startStr span classbutton start idstartBtn_ treeNode.tId title启用 onfocusthis.blur();/span; // 动态生成启用按钮var stopStr span classbutton stop idstopBtn_ treeNode.tId title停用 onfocusthis.blur();/span; // 动态生成停用按钮var statusStr span idstatusSpan_ treeNode.tId title状态[ (treeNode.status ? 启用 : 停用) ]/span; // 动态生成停用按钮sObj.after(stopStr).after(startStr).after(addStr).after(statusStr); // 在鼠标所在节点后显示添加按钮、启动按钮和其它操作按钮// - - - 新增按钮及处理方法 - - - //var addBtn $(#addBtn_treeNode.tId); // 获得添加按钮对象并绑定点击事件if (addBtn) addBtn.bind(click, function(){ // 添加按钮点击后的操作var newNodeName Math.round(Math.random()* 99999999).toString(); // 新增的节点名称$.ajax({ // 需要调用同步方法因此不能使用post方法这里需要添加节点type : POST,async : false,url : add_tree_node,dataType : json,data : {name: newNodeName, parentId: treeNode.id, parentName: treeNode.name},success:function(result){if (result ! null result.status true) {$(#div_alert).text(节点添加成功).prop(class, alert alert-success); // 设置提示信息并改变提示框样式为成功// 返回值为数据库中的自增IDzTree.addNodes(treeNode, {id: result.data, pId: treeNode.id, name: newNodeName, status: 1}); // 在ztree中添加节点因为在设置中将treeNode 的name设置为nameWithStatus,因此这里要传这个名称}else $(#div_alert).text(节点添加失败).prop(class, alert alert-warning); // 设置提示信息并改变提示框样式为警告}});return false;});function removeHoverDom(treeId, treeNode) { // 鼠标移除后清除临时生成的对象$(#addBtn_treeNode.tId).unbind().remove(); // 鼠标移动后删除添加按钮所有内容$(#startBtn_treeNode.tId).unbind().remove(); // 鼠标移动后删除启用按钮所有内容$(#stopBtn_treeNode.tId).unbind().remove(); // 鼠标移动后删除停用按钮所有内容$(#statusSpan_treeNode.tId).unbind().remove(); // 鼠标移动后删除状态框内容}function onRename(e, treeId, treeNode, isCancel) { // 修改名称var parentNode treeNode.getParentNode();$.ajax({ // 需要调用同步方法因此不能使用post方法这里需要添加节点type : POST,async : false,url : modify,dataType : json,data : {id: treeNode.id, name: treeNode.name, parentId: (parentNode ! null ? parentNode.id : 0), parentName: (parentNode ! null ? parentNode.name : [- 无 -])},success:function(result){if (result ! null result.status true) {$(#div_alert).text(修改成功).prop(class, alert alert-success); // 设置提示信息并改变提示框样式为成功isCancel false;}else { // 设置提示信息并改变提示框样式为警告$(#div_alert).text(修改失败).prop(class, alert alert-warning);isCancel true;}}});return isCancel;}function onDrop(event, treeId, treeNodes, targetNode, moveType) { // 调整树形节点的位置$.ajax({ // 需要调用同步方法因此不能使用post方法这里需要添加节点type : POST,async : false,url : modify,dataType : json,data : {id: treeNodes[0].id, name: treeNodes[0].name, parentId: (targetNode ! null ? targetNode.id : 0), parentName: (targetNode ! null ? targetNode.name : [- 无 -])},success:function(result){if (result ! null result.status true) {$(#div_alert).text(位置调整修改成功).prop(class, alert alert-success); // 设置提示信息并改变提示框样式为成}else { // 设置提示信息并改变提示框样式为警告$(#div_alert).text(位置调整修改失败).prop(class, alert alert-warning);}}});};
/script 转载于:https://my.oschina.net/ioooi/blog/1525745
