EasyUI 左侧 tree 右侧 DataGrid模板

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>组织架构管理</title>
    <script src="jquery-easyui-1.4.4/jquery.min.js"></script>
    <script src="jquery-easyui-1.4.4/jquery.easyui.min.js"></script>
    <script src="jquery-easyui-1.4.4/easyloader.js"></script>
    <script src="jquery-easyui-1.4.4/locale/easyui-lang-zh_CN.js"></script>
    <link href="jquery-easyui-1.4.4/themes/color.css" rel="stylesheet" />
    <link href="jquery-easyui-1.4.4/themes/icon.css" rel="stylesheet" />
    <link href="jquery-easyui-1.4.4/themes/default/easyui.css" rel="stylesheet" />
    <link href="jquery-easyui-1.4.4/IconExtension.css" rel="stylesheet" />
    <script src="js/common.js"></script>
    <script src="jquery-easyui-1.4.4/jquery-easyui-etree/jquery.etree.js"></script>
    <script src="jquery-easyui-1.4.4/jquery-easyui-etree/jquery.etree.lang.js"></script>
</head>
<body class="easyui-layout">


    <div data-options="region:'west',split:true,collapsible:false" title="组织架构" style="250px;">
        <ul id="Tree" style="padding: 5px 10px;"></ul>
        <div style="text-align:center;position:absolute;bottom:10px;left:50px">
            <a href="javascript://" onclick="AddRootNode()" style="font-size:small">增加根节点</a>
        </div>
    </div>
    <div id="center" data-options="region:'center'">
        <table id="DataGrid" data-options="region:'center',title:'员工列表'"></table>
        <div id="GridToolBar" border="false" style="border-bottom: 1px solid #ddd; height: 32px; padding: 2px 5px; background: #fafafa;">
            <div style="float: left;">
                <a href="#" class="easyui-linkbutton" plain="true" icon="icon-add" onclick=" OpendlgEdit('', '')">添加</a>
            </div>

            <div class="datagrid-btn-separator"></div>

            <div style="float: left;">
                <a href="#" class="easyui-linkbutton" plain="true" icon="icon-edit" onclick=" OpendlgEdit('ModifyEmployee', $('#DataGrid').datagrid('getSelected').id)">修改</a>
            </div>

            <div class="datagrid-btn-separator"></div>

            <div style="float: left;">
                <a href="#" class="easyui-linkbutton" plain="true" icon="icon-remove" onclick=" DeleteRow()">删除</a>
            </div>

            <div class="datagrid-btn-separator"></div>

            <div style="float: left;">
                <a href="#" class="easyui-linkbutton" plain="true" icon="icon-application_view_icons" onclick=" GetAllList()">显示所有</a>
            </div>

            <div class="datagrid-btn-separator"></div>

            <div style="float: left;padding:2px">
                <input class="easyui-searchbox" data-options="prompt:'请输入姓名',searcher:SearchByRealName" style=" 150px"></input>
            </div>

        </div>
        <script>
            $('#DataGrid').datagrid({
                title: '员工列表',
                //iconCls: 'icon-edit',//图标
                 700,
                height: 'auto',
                nowrap: false,
                striped: true,
                border: true,
                collapsible: false,//是否可折叠的
                fit: true,//自动大小
                url: 'personnel/OrgManage.ashx?action=GetEmployeeList',
                //sortName: 'id',
                //sortOrder: 'desc',
                remoteSort: false,
                idField: 'fldId',
                checkOnSelect: false,
                selectOnCheck: false,
                singleSelect: true,//是否单选
                pagination: true,//分页控件
                rownumbers: true,//行号
                frozenColumns: [[
                  { field: 'ck', checkbox: true }
                ]],
                toolbar: '#DataGridEmployeeToolBar',
                columns: [[
                { field: 'id', title: 'ID',  30 },
                { field: 'code', title: '工号',  60 },
                { field: 'realname', title: '姓名',  80 },
                { field: 'departname', title: '部门',  80 },
                { field: 'positionname', title: '职位',  80 },
                {
                    field: 'sex', title: '性别',  40, formatter: function (value, rowData, rowIndex) {
                        if (value == '0') {
                            return '男';
                        }
                        else {
                            return '女';
                        }
                    }
                },
                { field: 'birthday', title: '生日',  80 },
                { field: 'mobile', title: '手机',  80 },
                { field: 'email', title: '邮箱',  150 },
                { field: 'idcard', title: '身份证',  150 },
                {
                    field: 'updatetime', title: '更新时间',  200
                }
                ]],
                onLoadSuccess: function () {

                }
            }).datagrid('getPager').pagination({
                //设置分页控件
                pageSize: 50,//每页显示的记录条数,默认为10
                pageList: [50, 100, 150],//可以设置每页记录条数的列表
                beforePageText: '第',//页数文本框前显示的汉字
                afterPageText: '页    共 {pages} 页',
                displayMsg: '当前显示 {from} - {to} 条记录   共 {total} 条记录',
            });


            function GetAllList() {
                $('#DataGrid').datagrid('options').queryParams.realname = realname;
                $('#DataGrid').datagrid('reload');
            }
        </script>
    </div>
    <!---员工编辑对话框--->
    <div id="dlgEdit" class="easyui-dialog" style="padding:10px" closed="true">

    </div>

    <div id="TreeMenu" class="easyui-menu" style="15px;">
        <div onclick="javascript: $('#Tree').etree('create')">增加子部门</div>
        <div onclick="javascript: $('#Tree').etree('edit')">重命名</div>
        <div onclick="javascript: $('#Tree').etree('destroy')">删除部门</div>
    </div>

    <script>
        var treeid = "";
        $('#Tree').etree({
            url: 'personnel/OrgManage.ashx?action=GetDepartTree',
            createUrl: 'personnel/OrgManage.ashx?action=AddDepart',
            updateUrl: 'personnel/OrgManage.ashx?action=RenameDepart',
            destroyUrl: 'personnel/OrgManage.ashx?action=DeleteDepart',
            checkbox: false,
            lines: true,
            onLoadSuccess: function () {
                $("#Tree .tree-file ").each(function (node, data) {
                    $(this).replaceWith('<span class="tree-icon tree-indent  icon-group"></span>');
                });
                $("#Tree .tree-folder-open ").each(function (node, data) {
                    $(this).replaceWith('<span class="tree-icon tree-folder  icon-group"></span>');
                });

                //禁止拖拽 功能
                $(this).tree('disableDnd');
            },
            onContextMenu: function (e, node) {
                e.preventDefault();
                $(this).tree('select', node.target);
                $('#TreeMenu').menu('show', {
                    left: e.pageX,
                    top: e.pageY,
                    noline: true
                });
            },
            onClick: function (node) {
                treeid = node.id;
                $('#DataGrid').datagrid('options').queryParams.realname = treeid;
                $('#DataGrid').datagrid('reload');
            }

        });
        //增加根节点
        function AddRootNode() {
                $.get('personnel/OrgManage.ashx?action=AddDepart&parentid=0', function (data) {
                    if (data = '1')
                        $('#Tree').tree('reload');
                });  
        }

        //删除员工
        function DeleteRow() {
            var rows = $('#DataGrid').datagrid('getChecked');
            if (rows.length > 0) {
                $.messager.confirm('Confirm', '确定要删除勾选的记录吗?', function (r) {
                    if (r) {

                        var idList = '';
                        for (i in rows) {
                            idList += rows[i].id + ',';
                        }

                        idList = idList.substr(0, idList.length - 1);

                        $.post('???????????????????????', { action: 'DeleteEmployee', id: idList }, function (result) {
                            if (result > 0) {
                                $('#DataGrid').datagrid('reload').datagrid('unselectAll');    // 重新加载数据
                            } else {
                                $.messager.show({   // 出错提示
                                    title: 'Error',
                                    msg: result.errorMsg
                                });
                            }
                        }, 'json');
                    }
                });
            }
        }

        //打开编辑 对话框
        function OpendlgEditEmployee(action, id) {

            window.open('EditEmployee.html?action=' + action + '&id=' + id, "newwindow", " toolbar =no, menubar=no, scrollbars=no, resizable=no, location=no, status=no,top=200,left=300,height=350,width=500");

        }

        function SearchByRealName(realname) {
            $('#DataGrid').datagrid('options').queryParams.keyword = realname;
            $('#DataGrid').datagrid('reload');
        }

    </script>
</body>

</html>

  

原文地址:https://www.cnblogs.com/southhuachen/p/5648255.html