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="width: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="width: 150px"></input>
            </div>

        </div>
        <script>
            $(‘#DataGrid‘).datagrid({
                title: ‘员工列表‘,
                //iconCls: ‘icon-edit‘,//图标
                width: 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‘, width: 30 },
                { field: ‘code‘, title: ‘工号‘, width: 60 },
                { field: ‘realname‘, title: ‘姓名‘, width: 80 },
                { field: ‘departname‘, title: ‘部门‘, width: 80 },
                { field: ‘positionname‘, title: ‘职位‘, width: 80 },
                {
                    field: ‘sex‘, title: ‘性别‘, width: 40, formatter: function (value, rowData, rowIndex) {
                        if (value == ‘0‘) {
                            return ‘男‘;
                        }
                        else {
                            return ‘女‘;
                        }
                    }
                },
                { field: ‘birthday‘, title: ‘生日‘, width: 80 },
                { field: ‘mobile‘, title: ‘手机‘, width: 80 },
                { field: ‘email‘, title: ‘邮箱‘, width: 150 },
                { field: ‘idcard‘, title: ‘身份证‘, width: 150 },
                {
                    field: ‘updatetime‘, title: ‘更新时间‘, width: 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="width: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>

  

时间: 2024-08-14 21:03:13

EasyUI 左侧 tree 右侧 DataGrid模板的相关文章

PHP+Mysql+easyui点击左侧tree菜单对应表名右侧动态生成datagrid加载表单数据(二)

关于tree菜单生成,参考我的另一篇博文地址tree 菜单 实现功能:点击左侧tree菜单中的table,右侧通过datagrid加载出该表对用的所有数据 难点:获取该表的所有列名,动态生成datagrid,并加载数据 解决办法: 使用tree菜单的onClick事件: $('#tree').tree( { url:'tree_getData.php', onClick:function(node){ //判断点击的节点是否是子节点是子节点就创建datagrid,否则就return打开这个节点

项目实践——Easyui中tree的使用

树状结构在项目中必不可少,这篇博客来学习一下Easyui的tree. 前台JSP <span style="font-size:14px;"><body> <div id="leftDiv" class="easyui-layout" fit="true"> <div region="center" border="false" border=&

基于jQuery左侧大图右侧小图切换代码

基于jQuery左侧大图右侧小图切换代码是一款带右侧缩略图选项卡的jQuery图片切换特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="examples_body"> <div class="examples_bg"> <div class="examples_image"> <img src="images/sample_banner1.jpg&

【Jqurey EasyUI+Asp.net】---DataGrid的增、删、改、查

前面是写了两篇,但都不怎么完整,比较才刚开始学这个,都是摸着石头过河,一步一步的来.这两天终于把DataGrid的增删改查融合到一起了,所以分享一下,希望对和我一样的初学者都点帮助. 直接主题吧. 还是想说数据表吧,我建了一个很简单的表Rex_Test ID 自增序号 tName 姓名 tEmail 邮箱 前台代码: Default.aspx <%@ Page Language="C#" AutoEventWireup="true" CodeFile=&quo

做权限树时 使用EasyUI中Tree

符合EasyUI中Tree的Json格式,我们先看一下,格式是如何的 <span style="font-size:18px;">[{ "id":1, "text":"My Documents", "children":[{ "id":22, "text":"Photos", "state":"closed

css之两栏布局左侧固定右侧高度自适应

css两栏布局之左侧固定右侧高度自适应 先看这样的html+css结构: .main { width: 900px; overflow:hidden; margin: 0 auto; border:1px solid #000; } .left { width: 600px; float:left; background: #ccb; } .right { float:left; width: 300px; background: #acf; } <div class="main"

jQuery easyui的tree用法

由于easyui这个框架简化了不少开发过程,经常被拿来开发后台,但是其实有一个树型的控件,用起来稍微复杂一点,总结了一下最基本的用法! 首先是前台添加标签如下: <ul id="tt"> </ul> 其次添加引用包 <link href="~/Content/jquery-easyui-1.3.6/themes/default/easyui.css" rel="stylesheet" /> <link h

递归实现EasyUI中Tree的Json格式

最近在做学校的基础系统的时候前台需要树形的组织结构,由于前台的整体框架都用的是EasyUI,所以只能采用EasyUi中Tree的格式,可是麻烦的是,需要符合EasyUI中Tree的Json格式,我们先看一下,格式是如何的呢? <span style="font-size:18px;">[{ "id":1, "text":"My Documents", "children":[{ "id

jQuery左侧图片右侧文字滑动切换代码

分享一款jQuery左侧图片右侧文字滑动切换代码.这是一款基于jQuery实现的列表图片控制图片滑动切换代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="index-new w1200 mt30"> <div class="indexadd mt50 mb60"> <div id="banners" class="ui-banner"> <