做网站那几步,网站建设网站排名怎么做,集团公司网站建设策划,做网站运营话术jQuery EasyUI 树形网格#xff08;TreeGrid#xff09; - 创建复杂树形网格
jQuery EasyUI 的 TreeGrid 支持许多高级功能#xff0c;使其成为显示复杂层级数据的强大工具。复杂 TreeGrid 通常包括以下特性#xff1a;
多列显示复杂数据#xff08;如任务名称、人员、日…jQuery EasyUI 树形网格TreeGrid - 创建复杂树形网格jQuery EasyUI 的 TreeGrid 支持许多高级功能使其成为显示复杂层级数据的强大工具。复杂 TreeGrid 通常包括以下特性多列显示复杂数据如任务名称、人员、日期、进度等级联复选框Cascade Checkbox可编辑行Editable右键上下文菜单Context Menu动态加载或按需懒加载子节点On-Demand Loading页脚汇总Footer拖拽排序需扩展下面提供几个典型复杂示例基于官方 Demo 和教程。示例1复杂多列 TreeGrid带进度条、formatter这是一个典型的复杂 TreeGrid用于显示项目任务列表支持多列、进度条格式化。!DOCTYPEhtmlhtmlheadmetacharsetUTF-8title复杂 TreeGrid 示例/titlelinkrelstylesheettypetext/csshrefhttps://www.jeasyui.com/easyui/themes/default/easyui.csslinkrelstylesheettypetext/csshrefhttps://www.jeasyui.com/easyui/themes/icon.cssscripttypetext/javascriptsrchttps://code.jquery.com/jquery-1.12.4.min.js/scriptscripttypetext/javascriptsrchttps://www.jeasyui.com/easyui/jquery.easyui.min.js/script/headbodyh2复杂 TreeGrid - 项目任务管理/h2tableidtgclasseasyui-treegridstylewidth:800px;height:500pxdata-optionsurl:treegrid_complex_data.json, method:get, rownumbers: true, idField:id, treeField:name, lines: true, animate: truetheadtrthfieldnamewidth300任务名称/ththfieldpersonswidth80aligncenter人员/ththfieldbeginwidth100aligncenter开始日期/ththfieldendwidth100aligncenter结束日期/ththfieldprogresswidth150aligncenterformatterformatProgress进度/th/tr/thead/tablescripttypetext/javascriptfunctionformatProgress(value){if(value){varsdiv stylewidth:100%;border:1px solid #cccdiv stylewidth:value;background:#cc0000;color:#fffvalue/div;returns;}else{return;}}/script/body/htmltreegrid_complex_data.json示例[{id:1,name:项目A,persons:5,begin:2025-01-01,end:2025-06-01,progress:60%,children:[{id:11,name:模块1,persons:2,begin:2025-01-01,end:2025-03-01,progress:100%},{id:12,name:模块2,persons:3,begin:2025-03-01,end:2025-06-01,progress:30%}]}]示例2带级联复选框和右键上下文菜单的 TreeGrid添加复选框cascadeCheck、右键菜单append/remove/expand/collapse。tableidtgclasseasyui-treegridtitle带上下文菜单的 TreeGridstylewidth:700px;height:400pxdata-optionsurl:treegrid_data.json, idField:id, treeField:name, lines: true, rownumbers: true, cascadeCheck: true, onContextMenu: onContextMenutheadtrthfieldckcheckboxtrue/ththfieldnamewidth250名称/ththfieldsizewidth100大小/ththfielddatewidth150日期/th/tr/thead/tabledividmmclasseasyui-menustylewidth:120px;divonclickappend()iconClsicon-add追加/divdivonclickremoveIt()iconClsicon-remove删除/divdivclassmenu-sep/divdivonclickexpand()iconClsicon-reload展开/divdivonclickcollapse()iconClsicon-cancel折叠/div/divscriptfunctiononContextMenu(e,row){e.preventDefault();$(this).treegrid(select,row.id);$(#mm).menu(show,{left:e.pageX,top:e.pageY});}functionappend(){/* 实现追加逻辑 */}functionremoveIt(){/* 实现删除逻辑 */}functionexpand(){$(#tg).treegrid(expand,$(#tg).treegrid(getSelected).id);}functioncollapse(){$(#tg).treegrid(collapse,$(#tg).treegrid(getSelected).id);}/script示例3可编辑 TreeGridEditable支持行编辑、添加、删除。tableidtgclasseasyui-treegridstylewidth:700px;height:400px!-- 类似以上添加 toolbar --theadtrthfieldnamewidth200editortext名称/ththfieldprogresswidth120editor{type:numberbox,options:{precision:1}}进度/th/tr/thead/tabledividtoolbarahrefjavascript:void(0)classeasyui-linkbuttoniconClsicon-editonclickedit()编辑/aahrefjavascript:void(0)classeasyui-linkbuttoniconClsicon-saveonclicksave()保存/aahrefjavascript:void(0)classeasyui-linkbuttoniconClsicon-cancelonclickcancel()取消/a/div完整编辑逻辑参考官方 Editable TreeGrid Demo示例4按需懒加载子节点Lazy Loading先加载顶级节点展开时动态追加子节点。使用loadFilter处理数据。$(#tg).treegrid({url:full_tree_data.json,loadFilter:function(data){// 重命名 children 为 children1并设置 state: closed// 在 onBeforeExpand 中 append 子节点// 详见官方教程https://www.jeasyui.com/tutorial/tree/treegrid5.php}});更多功能推荐页脚汇总添加showFooter: true在数据中添加 footer 行。动态加载服务器返回子节点时传入 parent id 参数。拖拽排序需使用扩展插件treegrid_dnd。官方 Demo 列表强烈推荐查看Basic TreeGridCascade CheckBoxTreeGrid ContextMenuEditable TreeGridTreeGrid with FooterDynamic Loading / Lazy Loading访问https://www.jeasyui.com/demo/main/index.php?pluginTreeGrid如果需要特定功能如服务器端实现、拖拽等的完整代码或结合其他组件请提供更多细节