EasyUI jQuery treegrid Widget

下面是EasyUI jQuery treegrid Widget的完整攻略。

简介

什么是EasyUI jQuery treegrid Widget

EasyUI jQuery treegrid Widget是一款基于jQuery的树形表格控件，可以展示树形数据和表格数据的组合，同时还具有完整的数据排序、分页和搜索等功能，可广泛应用于各类在线信息管理系统、支撑后台管理和业务流程处理等多种应用场景。

EasyUI jQuery treegrid Widget的优点

实现方便 – 基于轻量级的jQuery插件编写，装载简单，使用便捷；
样式优美 – 预制多种皮肤，且易于自定义，美化网页表格；
功能强大 – 支持多级复杂结构的根、节点和子结构，支持多种格式的数据源输入，支持树形数据、折叠、展开。支持编辑、新增、删除、排序、过滤查询等功能。

安装和使用

安装EasyUI jQuery treegrid Widget

可以在EasyUI官网上下载EasyUI jQuery treegrid Widget压缩包，解压后将js目录中的jquery.treegrid.js和treegrid.css文件和图片拷入项目对应目录，添加对应的引用即可使用。

使用EasyUI jQuery treegrid Widget

EasyUI jQuery treegrid Widget的基本使用

<table id="tt"></table>
<script>
    $(function () {
        $('#tt').treegrid({
            url: 'treegrid_data.json',
            iconCls: 'icon-ok',
            rownumbers: true,
            idField: 'id',
            treeField: 'name',
            columns: [
                [
                    {field: 'name', title: '任务名称', width: 200},
                    {field: 'persons', title: '负责人', width: 80},
                    {field: 'begin', title: '开始时间', width: 120},
                    {field: 'end', title: '结束时间', width: 120}
                ]
            ]
        });
    });
</script>

示例

示例一

（1）示例简介

本示例实现了EasyUI jQuery treegrid Widget显示本地数据的功能，通过添加、编辑、删除、移动等操作，动态地展示了树形结构的表格数据。

（2）代码实现

HTML代码

<div class="easyui-panel" style="margin:30px;">
    <table id="tt" class="easyui-treegrid" style="width:500px;height:250px"
           data-options="
                    url:'treegrid_data.json',
                    method:'get',
                    animation:true,
                    idField:'id',
                    treeField:'name',
                    rownumbers:true,
                    toolbar:'#tb',
                    showFooter:true,
                    onContextMenu: onContextMenu,
                    onBeforeEdit: onBeforeEdit,
                    onAfterEdit: onAfterEdit,
                    onCancelEdit: onCancelEdit
            ">
        <thead>
        <tr>
            <th data-options="field:'name',width:180,editor:'text'">任务名称</th>
            <th data-options="field:'persons',width:80,editor:'text'">负责人</th>
            <th data-options="field:'begin',width:100,editor:{type:'datebox',options:{editable:false}}">开始时间</th>
            <th data-options="field:'end',width:100,editor:{type:'datebox',options:{editable:false}}">结束时间</th>
            <th data-options="field:'operate',width:60,align:'center',formatter:formatOperate">操作</th>
        </tr>
        </thead>
    </table>
    <div id="tb">
        <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true" onclick="append()">添加</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true" onclick="removeit()">删除</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-save',plain:true" onclick="accept()">保存</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-undo',plain:true" onclick="reject()">撤销</a> - 右键操作 -
    </div>
    <div id="mm" class="easyui-menu" style="width:120px;">
        <div id="mm_add" data-options="iconCls:'icon-add'">增加</div>
        <div id="mm_edit" data-options="iconCls:'icon-edit'">修改</div>
        <div id="mm_remove" data-options="iconCls:'icon-remove'">删除</div>
    </div>
    <div id="dlg" class="easyui-dialog" style="width:400px;height:280px;padding:10px 20px"
         closed="true" buttons="#dlg-btn">
        <div class="ftitle">任务信息</div>
        <form id="fm" method="post">
            <input type="hidden" id="parent_id" name="parent_id">
            <div class="fitem">
                <label>任务名称:</label>
                <input name="name" class="easyui-validatebox" required="true">
            </div>
            <div class="fitem">
                <label>负责人:</label>
                <input name="persons" class="easyui-validatebox" validType="length[0,20]">
            </div>
            <div class="fitem">
                <label>开始时间:</label>
                <input name="begin" class="easyui-datebox" required="true" editable="false">
            </div>
            <div class="fitem">
                <label>结束时间:</label>
                <input name="end" class="easyui-datebox" required="true" editable="false">
            </div>
        </form>
    </div>
    <div id="dlg-btn">
        <a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="saveTask()">保存</a>
        <a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')">取消</a>
    </div>
</div>

JavaScript代码

var editingId = undefined;

function edit() {
    if (editingId != undefined) {
        $('#tt').treegrid('select', editingId);
        return;
    }
    var row = $('#tt').treegrid('getSelected');
    if (row) {
        editingId = row.id
        $('#tt').treegrid('beginEdit', editingId);
    }
}

function onContextMenu(e, row) {
    e.preventDefault();
    $(this).treegrid('select', row.id);
    $('#mm').menu('show', {
        left: e.pageX,
        top: e.pageY
    });
}

function onBeforeEdit(row) {
    row.editing = true;
    updateActions(row);
}

function onAfterEdit(row) {
    row.editing = false;
    updateActions(row);
}

function onCancelEdit(row) {
    row.editing = false;
    updateActions(row);
}

function updateActions(row) {
    if (row.editing) {
        $('#save,#redo').show();
        $('#edit,#remove,#add').hide();
    } else {
        $('#save,#redo').hide();
        $('#edit,#remove,#add').show();
    }
}

function accept() {
    if (editingId != undefined) {
        var t = $('#tt');
        t.treegrid('endEdit', editingId);
        editingId = undefined;
        var children = t.treegrid('getChildren');
        $(children).each(function (index, item) {
            if (typeof item.editing == 'undefined') {
                return;
            }
            if (item.editing) {
                t.treegrid('endEdit', item.id);
                item.editing = false;
            }
        });
        var data = $('#tt').treegrid('getData');
        $.ajax({
            url: 'treegrid_save.json',
            data: {data: JSON.stringify(data)},
            type: 'post',
            dataType: 'json',
            success: function (r) {
                if (r.success) {
                    alert('保存成功！');
                    $('#tt').treegrid('reload');
                } else {
                    alert('保存失败！');
                }
            }
        });
    }
}

function reject() {
    if (editingId != undefined) {
        $('#tt').treegrid('cancelEdit', editingId);
        editingId = undefined;
    } else {
        var children = $('#tt').treegrid('getChildren');
        $(children).each(function (index, item) {
            if (item.editing) {
                $('#tt').treegrid('cancelEdit', item.id);
            }
        });
    }
}

function add() {
    var row = $('#tt').treegrid('getSelected');
    var id;
    if (!row) {
        id = 0;
    } else {
        id = row.id;
    }
    $('#dlg').dialog({
        title: '新增任务信息', width: 400, height: 280, closed: false, cache: false, modal: true,
        buttons: [{
            text: '保存', iconCls: 'icon-ok', handler: function () {
                saveTask();
            }
        }, {
            text: '取消', iconCls: 'icon-cancel', handler: function () {
                $('#dlg').dialog('close');
            }
        }]
    });
    $('#fm').form('clear');
    $('#parent_id').val(id);
}

function del() {
    var row = $('#tt').treegrid('getSelected');
    if (row) {
        $.messager.confirm('Confirm', '您确定要删除这个任务?', function (r) {
            if (r) {
                var id = row.id;
                $.post('treegrid_del.json', {id: id}, function (r) {
                    if (r.success) {
                        $('#tt').treegrid('remove', id);
                        alert('删除成功！');
                    } else {
                        alert('删除失败！');
                    }
                }, 'json');
            }
        });
    }
}

function saveTask() {
    $('#fm').form('submit', {
        url: 'treegrid_add.json',
        onSubmit: function () {
            var isValid = $(this).form('validate');
            if (!isValid) {
                return false;
            }
            return true;
        },
        success: function (result) {
            var obj = JSON.parse(result);
            if (obj.success == true) {
                $('#dlg').dialog('close');
                $('#tt').treegrid('append', {
                    parent: $('#parent_id').val(),
                    data: [{
                        id: obj.id,
                        name: $('#name').val(),
                        persons: $('#persons').val(),
                        begin: $('#begin').val(),
                        end: $('#end').val()
                    }]
                });
                var node = $('#tt').treegrid('find', obj.id);
                $(node.target).attr('method', 'post').attr('action', 'treegrid_add.json');
            }
        }
    });
}

$(function () {
    $('#mm').menu({
        onClick: function (item) {
            if (item.id == 'mm_add') {
                add();
            } else if (item.id == 'mm_edit') {
                edit();
            } else if (item.id == 'mm_remove') {
                del();
            }
        }
    });
});

示例二

（1）示例简介

本示例展示了通过EasyUI jQuery treegrid Widget结合后台数据，以动态的节点展开、折叠，显示了一份组织机构表格的树形数据信息。

（2）代码实现

HTML代码

<div class="easyui-panel" title="支撑机构" style="padding:10px;">
    <table id="tt" class="easyui-treegrid" title="机构列表" style="width:100%;height:300px"
           data-options="url:'getOrgData', method:'get',idField:'id',treeField:'orgName',
                   columns:[[
                       {field:'orgName',title:'机构名称'},
                       {field:'orgId',title:'机构代码', width:80},
                       {field:'orgStatus',title:'状态', width:60},
                       {field:'orgManager',title:'负责人', width:80},
                       {field:'orgPhone',title:'联系电话', width:120},
                       {field:'orgEmail',title:'电子邮箱', width:150},
                       {field:'proDate',title:'创建时间', width:120,align:'center'}
                   ]],
                   onLoadSuccess: function(row) {
                       $(this).treegrid('expandAll');
                   }">
    </table>
</div>

JavaScript代码

$(document).ready(function () {
    $('#tt').treegrid({
        url: 'getOrgData',
        method: 'get',
        idField: 'id',
        treeField: 'orgName',
        columns: [[
            {field: 'orgName', title: '机构名称'},
            {field: 'orgId', title: '机构代码', width: 80},
            {field: 'orgStatus', title: '状态', width: 60},
            {field: 'orgManager', title: '负责人', width: 80},
            {field: 'orgPhone', title: '联系电话', width: 120},
            {field: 'orgEmail', title: '电子邮箱', width: 150},
            {field: 'proDate', title: '创建时间', width: 120, align: 'center'}
        ]],
        onLoadSuccess: function (row) {
            $(this).treegrid('expandAll');
        }
    });
});

总结

以上是关于如何使用EasyUI jQuery treegrid Widget的完整攻略。本文详细介绍了EasyUI jQuery treegrid Widget的安装和使用，同时通过两个实例，讲解了EasyUI jQuery treegrid Widget在实际项目开发中的应用。相信在掌握了这些基础知识之后，可以更好的使用EasyUI jQuery treegrid Widget来展示复杂的树形表格数据。

简介

什么是EasyUI jQuery treegrid Widget

EasyUI jQuery treegrid Widget的优点

安装和使用

安装EasyUI jQuery treegrid Widget

使用EasyUI jQuery treegrid Widget

示例

示例一

示例二

总结

你可能也喜欢

jQWidgets jqxTreeGrid addFilter()方法

jQuery BlockUI插件

jQWidgets jqxLoader imagePosition属性