layout 自适应详解

时间：2014-03-08 05:02:22 阅读：492 评论：0 收藏：0 [点我收藏+]

@{
    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="width: 300px; height: 25px;" />
                    </div>
        </div>
    </div>
    <div region="west" title="部门树" id="leftDepTree" split="true" style="width: 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="width: 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) {

//查找人员
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) {

} 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") {

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

}

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

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

MySearchEmployee.UnloadEmployeeList(rowData.UserId);
},

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

                    MySearchEmployee.selectedByforSeacherEmployeeList(data);
                },
                columns: [[
                  { field: ‘ck‘, checkbox: ‘true‘, width: 30 },
                  { field: ‘UserId‘, width: 30, hidden: true },
                  { field: ‘RealName‘, title: ‘姓名‘, width: 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 全不选

            $("#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); //加载角色权限树

        $(window).resize(function () { //浏览器窗口变化
            var win_width = $(window).width();
            $(‘#bobyLayout‘).layout(‘panel‘, ‘west‘).panel(‘resize‘, { width: win_width / 4 });
            $(‘#bobyLayout‘).layout(‘panel‘, ‘east‘).panel(‘resize‘, { width: win_width / 4 });
            $(‘#bobyLayout‘).layout(‘resize‘);
            $(‘#cc‘).layout(‘panel‘, ‘center‘).panel(‘resize‘, { width: win_width / 4 });
            $(‘#cc‘).layout(‘panel‘, ‘west‘).panel(‘resize‘, { width: 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();
        $(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>

layout 自适应详解,布布扣,bubuko.com

layout 自适应详解

原文：http://www.cnblogs.com/dullbaby/p/3586903.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)