• 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>
    

      

  • 相关阅读:
    Vue生命周期总结
    jQuery的层级选择器
    jQuery操作DOM的相关方法
    PHP基本语法
    组件间的传值
    MV*模式
    js 常用事件
    kali使用-WIFI破解
    使用css将网页变成黑白色
    css权重等级
  • 原文地址:https://www.cnblogs.com/southhuachen/p/5648255.html
Copyright © 2020-2023  润新知