• layout 自适应详解


    @{
        ViewBag.Title = "人员查找";
        ViewBag.LeftWidth = "200px";
        ViewBag.MiddleWidth = "200px";
    }
    <html>
    <head>
        <link href="../../../Script/easyui/themes/bootstrap/easyui.css" rel="stylesheet"
            type="text/css" />
        <link href="../../../Script/easyui/themes/icon.css" rel="stylesheet" type="text/css" />
        <link href="../../../Content/themes/base/Common/common.css" rel="stylesheet" type="text/css" />
        <script src="../../../Script/easyui/jquery-1.8.3.min.js" type="text/javascript"></script>
        <script src="../../../Script/Common/json2.js" type="text/javascript"></script>
        <script src="../../../Script/easyui/jquery.easyui.min.js" type="text/javascript"></script>
        <script src="../../../Script/easyui/easyui-lang-zh_CN.js" type="text/javascript"></script>
        <script src="../../../Script/Common/Toolbar.js" type="text/javascript"></script>
        <script src="../../../Script/easyui/plugins/JValidator.js" type="text/javascript"></script>
        <script src="../../../Script/Common/Common.js" type="text/javascript"></script>
    </head>
    <body class="easyui-layout" id="bobyLayout">
        <div region="north" data-options="border:true,toolbar:'#toolbar'" style="height: 32px;">
            <div class="button_tool">
                <a id="btn_byforDepmen" onclick="searchByforDep()" href="javascript:void(0)" class="easyui-linkbutton"
                    data-options="iconCls:'icon-search'">按部门设置</a><a id="btn_byforRose" onclick="searchByforRose()"
                        href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-search'">
                        按岗位设置</a><div style="float: right">
                            <input id="txt_search" class="easyui-searchbox" data-options="prompt:'输入姓名或拼音简写',searcher:findSearchEmp"
                                style=" 300px; height: 25px;" />
                        </div>
            </div>
        </div>
        <div region="west" title="部门树" id="leftDepTree" split="true" style=" 230px;">
            <div style="border: 1px;">
                <ul id="Deptree" class="easyui-tree">
                </ul>
            </div>
        </div>
        <div data-options="region:'center',split:'true', fit:'true', border:'false'">
            <div id="cc" class="easyui-layout" data-options="fit:true,border:false">
                <div data-options="region:'center' , fit:'true',border:'false',title:'选择人员'">
                    <table id="SearchEmployeeList" class="easyui-datagrid" data-options="fit:true,border:true">
                    </table>
                    @*        <div id="toolbar">
            <a href="javascript:void(0)" onclick="searchByforDep()"  class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newUser()">按部门设置</a>
            <a href="javascript:void(0)" onclick="searchByforRose()"  class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editUser()">按岗位设置</a>
        </div>*@
                </div>
            </div>
        </div>
        <div region="east" title="选中人员" split="true" style=" 360px;">
            <table id="EmployeeList" class="easyui-datagrid" fitcolumns="true" data-options="fit:true,border:false,checkOnSelect:true, singleselect:false">
                <thead>
                    <tr>
                        <th field="ck" width="50" checkbox="true">
                        </th>
                        <th field="UserId" hidden="true" width="50">
                        </th>
                        <th field="RealName" width="50">
                            姓名
                        </th>
                    </tr>
                </thead>
            </table>
        </div>
        <div region="south" split="true" style="height: 55px;">
            <div style="margin: 0 auto; text-align: center; margin-top: 10px;">
                <a href="javascript:void(0)" onclick="query()" class="easyui-linkbutton" data-options="">
                    确定</a> <a href="javascript:void(0)" onclick="ClearEmptyData()" class="easyui-linkbutton"
                        data-options="">清空</a> @*  <a href="javascript:void(0)" onclick="cancle()" class="easyui-linkbutton" data-options="">
                            取消</a>*@
            </div>
        </div>
    </body>
    </html>
    <script type="text/javascript">
        //页面加载按部门搜索部门树列表
        var MySearchEmployee = {
            //加载左侧部门树
            onloadDepTree: function (choose, flag) { //部门树方法
                $('#Deptree').tree({
                    checkbox: false,
                    url: '../SearchEmployee/GetOrganizationList',
                    onClick: function (node) {
                        //flag代表着开关, D表示加载部门信息
                        if (flag == "D") {
                            MySearchEmployee.EmployeeListByforOrg(node.EX1, node.id, choose); //传递参数绑定gridList
                        }
                        else {
                            MySearchEmployee.onloadRoleTree(node.id, choose); //加载员工数
                        }

                        // $('#EmployeeList').datagrid('clearChecked');
                    }
                });

                $('#cc').layout('remove', 'west');
            },
            //加载左侧岗位上
            onloadRoleTree: function (orgid, choose) {
                $('#roleTree').tree({
                    checkbox: false,
                    url: '../SearchEmployee/GetRoseList?orgID=' + orgid,
                    onClick: function (node) {
                        MySearchEmployee.onloadSeachEmpListByforRole(node.id, choose); //加载人员列表
                    }
                });
            },
            //清空原来的数据
            removeEmpListTree: function (choose) {//岗位树
                MySearchEmployee.onloadDepTree(choose, "R");
                //隐藏部门加载人员列表
                var region = 'west';
                var options = {
                    region: region
                };
                options.width = 260;
                options.split = true;
                options.title = "岗位树";
                options.id = "leftroleTree";
                $('#cc').layout('add', options);
                $("#leftroleTree").append("  <div style="border: 1px;"> <ul id="roleTree" class="easyui-tree"> </ul> </div> ");
                var data = $('#SearchEmployeeList').datagrid('getData'); //清空下searList
                for (var i = (data.total - 1); i >= 0; i--) {
                    $('#SearchEmployeeList').datagrid('deleteRow', i);
                }
                $('#EmployeeList').datagrid('clearChecked');
            },
            //点击部门按钮
            checkDepTree: function (choose) {

                //去掉岗位树
                $('#cc').layout('remove', 'west');
                var data = $('#SearchEmployeeList').datagrid('getData'); //清空下searList
                for (var i = (data.total - 1); i >= 0; i--) {
                    $('#SearchEmployeeList').datagrid('deleteRow', i);
                }
                $('#EmployeeList').datagrid('clearChecked');
                MySearchEmployee.onloadDepTree(choose, "D");

            },

            onloadSeachEmpList: function (UserId, RealName) {//单击选中checkbox 确定最终的显示人
                var contains = false;
                var data = $('#EmployeeList').datagrid('getData');
                if (data.total == 0) {
                    $('#EmployeeList').datagrid('insertRow', {
                        index: 1, // index start with 0
                        row: { "UserId": UserId, "RealName": RealName }
                    });
                }
                else {
                    for (var i = 0; i < data.total; i++) {
                        if (data.rows[i].UserId == UserId) {
                            contains = true;
                            break;
                        }
                    }
                    if (!contains) {
                        $('#EmployeeList').datagrid('insertRow', {
                            index: 1, // index start with 0
                            row: { "UserId": UserId, "RealName": RealName }
                        });
                    }
                }
                $('#EmployeeList').datagrid('checkAll'); //默认全部选中
            },

            EmployeeListByforOrg: function (Category, OrganizationId, Choose) {//根据部门的ID和种类查询出本部门下所有的人员

                var param = {
                    "Category": Category, "OrganizationId": OrganizationId

                };
                $("#SearchEmployeeList").datagrid({
                    url: '../SearchEmployee/GetEmployeeByForOrg',
                    nowrap: false, //是否换行,True 就会把数据显示在一行里
                    striped: true, //True 奇偶行使用不同背景色
                    fitColumns: true, //True 就会自动扩大或缩小列的尺寸以适应表格的宽度并且防止水平滚动。          
                    queryParams: param,
                    onSelect: function (rowIndex, rowData) //选中时绑定人员表
                    {

                        // choose 代表着单选还是多选 s是单选 m是多选
                        if (Choose == "S") {

                            //清空下以前的选中的
                            $('#EmployeeList').datagrid('clearChecked');
                            MySearchEmployee.onloadSeachEmpList(rowData.UserId, rowData.RealName);

                        } else {
                            MySearchEmployee.onloadSeachEmpList(rowData.UserId, rowData.RealName);

                        }
                    },
                    onUnselect: function (rowIndex, rowData) {  //取消选中是的时候同时也要删

                        MySearchEmployee.UnloadEmployeeList(rowData.UserId);
                    },

                    onSelectAll: function (rows) //全部选中
                    {
                        MySearchEmployee.onSelectAllByforSearchEmployeeList(rows); //全部选中
                    },
                    onUnselectAll: function (rows) {

                        MySearchEmployee.onUnselectAllByforSearchEmployeeList(rows); //全部不选中
                    },
                    onLoadSuccess: function (data) {

                        MySearchEmployee.selectedByforSeacherEmployeeList(data);
                    },
                    columns: [[
                      { field: 'ck', checkbox: 'true', 30 },
                      { field: 'UserId', 30, hidden: true },
                      { field: 'RealName', title: '姓名', 300 }
               ]]
                });
            },

            //查找人员
            findSearchEmp: function () {

                var emp = $('#txt_search').searchbox('getValue');


                if (emp != null && emp != "") {

                    //加载人员列表
                    $("#SearchEmployeeList").datagrid({
                        url: '../SearchEmployee/GetSearchUser',
                        nowrap: false, //是否换行,True 就会把数据显示在一行里
                        striped: true, //True 奇偶行使用不同背景色
                        fitColumns: true, //True 就会自动扩大或缩小列的尺寸以适应表格的宽度并且防止水平滚动。  
                        queryParams: { "keyName": emp },
                        onSelect: function (rowIndex, rowData) //选中时绑定人员表
                        {

                            // choose 代表着单选还是多选 s是单选 m是多选
                            if (MySearchEmployee.getUrl == "S") {

                                //清空下以前的选中的
                                $('#EmployeeList').datagrid('clearChecked');
                                MySearchEmployee.onloadSeachEmpList(rowData.UserId, rowData.RealName);

                            } else {
                                MySearchEmployee.onloadSeachEmpList(rowData.UserId, rowData.RealName);

                            }
                        },
                        onUnselect: function (rowIndex, rowData) {  //取消选中是的时候同时也要删

                            MySearchEmployee.UnloadEmployeeList(rowData.UserId);
                        },

                        onSelectAll: function (rows) //全部选中
                        {
                            MySearchEmployee.onSelectAllByforSearchEmployeeList(rows); //全部选中
                        },
                        onUnselectAll: function (rows) {

                            MySearchEmployee.onUnselectAllByforSearchEmployeeList(rows); //全部不选中
                        },
                        onLoadSuccess: function (data) {

                            MySearchEmployee.selectedByforSeacherEmployeeList(data);
                        },
                        columns: [[
                      { field: 'ck', checkbox: 'true', 30 },
                      { field: 'UserId', 30, hidden: true },
                      { field: 'RealName', title: '姓名', 300 }
               ]]
                    });


                } else {

                    return false;
                }

            },


            //根据角色树加载List列表
            onloadSeachEmpListByforRole: function (roleID, Choose) {

                var param = {
                    "roleID": roleID
                };
                $("#SearchEmployeeList").datagrid({
                    url: '../SearchEmployee/GetUserByforRole',
                    nowrap: false, //是否换行,True 就会把数据显示在一行里
                    striped: true, //True 奇偶行使用不同背景色
                    fitColumns: true, //True 就会自动扩大或缩小列的尺寸以适应表格的宽度并且防止水平滚动。          
                    queryParams: param,
                    onSelect: function (rowIndex, rowData) //选中时绑定人员表
                    {
                        if (Choose == "S") {

                            //清空下以前的选中的
                            $('#EmployeeList').datagrid('clearChecked');
                            MySearchEmployee.onloadSeachEmpList(rowData.UserId, rowData.RealName);

                        } else {
                            MySearchEmployee.onloadSeachEmpList(rowData.UserId, rowData.RealName);

                        }

                        //    MySearchEmployee.onloadSeachEmpList(rowData.UserId, rowData.RealName);

                    },
                    onUnselect: function (rowIndex, rowData) {  //取消选中是的时候同时也要删

                        MySearchEmployee.UnloadEmployeeList(rowData.UserId);
                    },

                    onSelectAll: function (rows) //全部选中
                    {
                        MySearchEmployee.onSelectAllByforSearchEmployeeList(rows); //全部选中
                    },
                    onUnselectAll: function (rows) {

                        MySearchEmployee.onUnselectAllByforSearchEmployeeList(rows); //全部不选中
                    },
                    onLoadSuccess: function (data) {

                        MySearchEmployee.selectedByforSeacherEmployeeList(data);
                    },
                    columns: [[
                      { field: 'ck', checkbox: 'true', 30 },
                      { field: 'UserId', 30, hidden: true },
                      { field: 'RealName', title: '姓名', 300 }
               ]]
                });
            },
            UnloadEmployeeList: function (UserId) { //取消的时候删除行
                //根据userID查找这一行的索引
                var data = $('#EmployeeList').datagrid('getData');

                for (var i = 0; i < data.total; i++) {

                    if (data.rows[i].UserId == UserId) {
                        $('#EmployeeList').datagrid('deleteRow', i);
                    }
                }
            },
            unselectRowEmployeeList: function (UserId) {  //去除已经选择上的人员,并且在SearchEmployeeList把打钩去掉
                var data = $('#SearchEmployeeList').datagrid('getData');
                for (var i = 0; i < data.total; i++) {
                    if (data.rows[i].UserId == UserId) {
                        $('#SearchEmployeeList').datagrid('unselectRow', i);
                    }
                }
            },
            onSelectAllByforSearchEmployeeList: function (rows) { //SearchEmployeeList 全选

                //那么EmployeeList 就要显示选中的行
                //选清空一下
                //  $('#EmployeeList').datagrid('clearChecked');
                //然后在增加
                for (var i = 0; i < rows.length; i++) {
                    MySearchEmployee.onloadSeachEmpList(rows[i].UserId, rows[i].RealName);
                }
            },
            onUnselectAllByforSearchEmployeeList: function (rows) { //SearchEmployeeList 全不选

                var data = $('#EmployeeList').datagrid('getData'); //获取当前的EmloyeeList所有的数据
                //删除EmployeeList
                for (var i = 0; i < rows.length; i++) {
                    for (var k = 0; k < data.total; k++) {
                        if (rows[i].UserId == data.rows[k].UserId) {
                            $('#EmployeeList').datagrid('deleteRow', k);
                        }
                    }
                }
            },
            onloadForEmployeeList: function () {

                $("#EmployeeList").datagrid({
                    onUnselect: function (rowIndex, rowData) {
                        $('#EmployeeList').datagrid('deleteRow', rowIndex); //删除当前行

                        MySearchEmployee.unselectRowEmployeeList(rowData.UserId); //去除SearchEmployeeList打钩数据
                    },
                    onLoadSuccess: function (data) { //接收data

                        //全局变量

                    },
                    onUnselectAll: function (rows) {
                        MySearchEmployee.deleteAllforEmployeeList(rows); //删除所有的列表人员
                    }
                });

            },
            deleteAllforEmployeeList: function (rows) { //清空选中的列表

                var data = $('#SearchEmployeeList').datagrid('getData'); //获取当前的EmloyeeList所有的数据

                var arryList = [];

                for (var i = (rows.length - 1); i >= 0; i--) {
                    for (var k = 0; k < data.total; k++) {
                        if (data.rows[k].UserId == rows[i].UserId) {
                            arryList.push(k);
                        }
                    }
                    $('#EmployeeList').datagrid('deleteRow', i); //删除list列表             
                }


                for (var i = 0; i < arryList.length; i++) {
                    $('#SearchEmployeeList').datagrid('unselectRow', arryList[i]);
                }
            },
            //清空数据
            ClearEmptyData: function () {

                var dataEmployeeList = $('#EmployeeList').datagrid('getData');

                var data = $('#SearchEmployeeList').datagrid('getData'); //获取当前的EmloyeeList所有的数据

                var arryList = [];

                for (var i = (dataEmployeeList.total - 1); i >= 0; i--) {
                    for (var k = 0; k < data.total; k++) {
                        if (data.rows[k].UserId == dataEmployeeList.rows[i].UserId) {
                            arryList.push(k);
                        }
                    }
                    $('#EmployeeList').datagrid('deleteRow', i); //删除list列表             
                }


                for (var i = 0; i < arryList.length; i++) {
                    $('#SearchEmployeeList').datagrid('unselectRow', arryList[i]);
                }


            },
            selectedByforSeacherEmployeeList: function (Depdata) { //执行回调打钩
                var Empdata = $('#EmployeeList').datagrid('getData');
                var arryList = []; //存放索引的值
                for (var i = 0; i < Depdata.total; i++) {
                    for (var k = 0; k < Empdata.total; k++) {
                        if (Depdata.rows[i].UserId == Empdata.rows[k].UserId) {
                            arryList.push(i);
                        }
                    }
                }
                for (var i = 0; i < arryList.length; i++) {
                    $('#SearchEmployeeList').datagrid('checkRow', arryList[i]); // checkRow  selectRow
                }
            },
            //
            getUrl: "", //获取URL的参数
            GetRequest: function () {
                var url = location.search; //获取url中"?"符后的字串
                var theRequest = new Object();
                if (url.indexOf("?") != -1) {
                    var str = url.substr(1);
                    strs = str.split("&");
                    for (var i = 0; i < strs.length; i++) {
                        theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
                    }
                }
                return theRequest;


            },

            getData: function () { //返回提交EmpList表中的数据

                var data;
                var Empdata = $('#EmployeeList').datagrid('getData');
                if (Empdata.total > 0) {
                    data = Empdata.rows;

                } else {
                    data = null;
                }

                return data;
            },
            query: function () {

                parent.window.$("#win").window("close");


            },
            cancle: function () {


            }
        };
        //单击部门
        function searchByforDep() {  //按部门搜索
            MySearchEmployee.checkDepTree(MySearchEmployee.getUrl);

        }
        //单击按角色查询
        function searchByforRose() {
            MySearchEmployee.removeEmpListTree(MySearchEmployee.getUrl); //加载角色权限树

            var win_width = $(window).width();
            $('#bobyLayout').layout('panel', 'west').panel('resize', { win_width / 4 });
            $('#bobyLayout').layout('panel', 'east').panel('resize', { win_width / 4 });
            $('#bobyLayout').layout('resize');
            $('#cc').layout('panel', 'center').panel('resize', { win_width / 4 });
            $('#cc').layout('panel', 'west').panel('resize', { win_width / 4 });
            $('#cc').layout('resize');

            $(window).resize(function () { //浏览器窗口变化
                var win_width = $(window).width();
                $('#bobyLayout').layout('panel', 'west').panel('resize', { win_width / 4 });
                $('#bobyLayout').layout('panel', 'east').panel('resize', { win_width / 4 });
                $('#bobyLayout').layout('resize');
                $('#cc').layout('panel', 'center').panel('resize', { win_width / 4 });
                $('#cc').layout('panel', 'west').panel('resize', { win_width / 4 });
                $('#cc').layout('resize');

               
            });

          


        }

        //模糊查询
        function findSearchEmp() {

            MySearchEmployee.findSearchEmp();

        }
        //清空数据
        function ClearEmptyData() {
            MySearchEmployee.ClearEmptyData();
        }
        //确定
        function query() {
            MySearchEmployee.query();

        }
        //取消
        function cancle() {

            MySearchEmployee.cancle();

        }

        function getData() {
            return MySearchEmployee.getData();
        }

        function cover() {
            var win_width = $(window).width();
            $('#bobyLayout').layout('panel', 'west').panel('resize', { win_width / 3 });
            $('#bobyLayout').layout('panel', 'east').panel('resize', { win_width / 3 });
            $('#bobyLayout').layout('panel', 'center').panel('resize', { win_width / 3 });
            $('#bobyLayout').layout('resize');

        }


        //页面初始化
        $(function () {

            cover();
            $(window).resize(function () { //浏览器窗口变化
                cover();
            });


            var choose;
            var Request = new Object();
            Request = MySearchEmployee.GetRequest();
            choose = Request['choose'];
            MySearchEmployee.getUrl = choose;
            MySearchEmployee.onloadDepTree(MySearchEmployee.getUrl, "D");
            MySearchEmployee.onloadForEmployeeList(); //页面出
        });
    </script>

  • 相关阅读:
    第四次作业—— 分析比较各种软件构建环境
    如何实现点击事件触发之后刷新还保存原值
    简单理解js闭包
    javascript中 __proto__与prorotype的理解
    原生和jQuery的ajax用法
    getElementById和querySelector方法的区别
    关于javascript闭包理解
    第二篇 进销存管理系统冲刺博客
    个人项目:WC
    自我介绍+软工五问
  • 原文地址:https://www.cnblogs.com/dullbaby/p/3586903.html
Copyright © 2020-2023  润新知