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="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) {
MySearchEmployee.selectedByforSeacherEmployeeList(data);
},
columns: [[
{ field: 'ck', checkbox: 'true', width: 30 },
{ field: 'UserId', width: 30, hidden: true },
{ field: 'RealName', title: '姓名', width: 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', width: 30 },
{ field: 'UserId', width: 30, hidden: true },
{ field: 'RealName', title: '姓名', width: 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', 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 全不选
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', { 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');
$(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() {
var win_width = $(window).width();
$('#bobyLayout').layout('panel', 'west').panel('resize', { width: win_width / 3 });
$('#bobyLayout').layout('panel', 'east').panel('resize', { width: win_width / 3 });
$('#bobyLayout').layout('panel', 'center').panel('resize', { width: 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>
layout 自适应详解的更多相关文章
- Android 布局学习之——Layout(布局)详解二（常见布局和布局参数）
[Android布局学习系列] 1.Android 布局学习之——Layout(布局)详解一 2.Android 布局学习之——Layout(布局)详解二(常见布局和布局参数) 3.And ...
- IE的layout属性详解
http://www.cnblogs.com/yuzhongwusan/archive/2012/03/09/2387052.html 很多在谷歌浏览器(chrome).火狐浏览器(Fire Fox) ...
- 【ASP.NET】Layout使用详解
1.母板页_Layout.cshtml 类似于传统WebForm中的.master文件,起到页面整体框架重用的目地 1.母板页代码预览 1 <!DOCTYPE html> 2 <ht ...
- Android 布局学习之——Layout(布局)详解一
layout(布局)定义了用户界面的可视化结构(visual structure),如Activity的UI,应用窗口的UI. 有两种方式声明layout: 1.在xml文件中声明UI组件. 2.在运 ...
- 第71讲：Scala界面Panel、Layout实战详解
今天学习了王家林老师scala讲座的第71讲,scala界面编程panel实战.让我们一起来看一下. 信息来源于 DT大数据梦工厂微信公众账号:DT_Spark 关注微信账号,获取更多关于王家林老师的 ...
- Metasploit详解
title date tags layout Metasploit 详解 2018-09-25 Metasploit post 一．名词解释 exploit 测试者利用它来攻击一个系统,程序,或服务, ...
- ExtJs常用布局--layout详解（含实例）
序言: 笔者用的ExtJs版本:ext-3.2.0 ExtJs常见的布局方式有:border.form.absolute.column.accordion.table.fit.card.anchor ...
- View绘制详解(四)，谝一谝layout过程
上篇博客我们介绍了View的测量过程,这只是View显示过程的第一步,第二步就是layout了,这个我们一般译作布局,其实就是在View测量完成之后根据View的大小,将其一个一个摆放在ViewGro ...
- Log4J：Log4J三大组件：Logger+Appender+Layout 格式化编程详解
快速了解Log4J Log4J的三个组件: Logger:日志记录器,负责收集处理日志记录 (如何处理日志) Appender:日志输出目的地,负责日志的输出 (输出到什么 地方) Layo ...
随机推荐
- Vue.Draggable实现拖拽效果（采坑小记）
之前有写过Vue.Draggable实现拖拽效果(快速使用)(http://www.cnblogs.com/songdongdong/p/6928945.html)最近项目中要用到这个拖拽的效果,当产 ...
- Codeforces Round #506 (Div. 3)B.Creating the Contest(dp)
B. Creating the Contest time limit per test 1 second memory limit per test 256 megabytes input stand ...
- mariadb-10GTID复制及多源复制
---本文大纲 一.什么是GTID 二.应用场景 三.多线程复制说明 四.实现过程 五.多源复制原理 六.实现过程 ---------------------------------- 一.什么是GI ...
- Cocos2d-X中的菜单
在Cocos2d-X实现显示菜单的方式比較特殊,首先须要使用CCMenu创建一个菜单,然后使用CCMenuItem创建一个菜单项,实际上程序中显示的菜单是使用CCMenu和CCMenuItemFont ...
- PHP array_pad()
定义和用法 array_pad() 函数向一个数组插入带有指定值的指定数量的元素. 语法 array_pad(array,size,value) 参数 描述 array 必需.规定数组. size 必 ...
- load函数
load函数的作用 1.load函数的作用是,从server获取数据,而且把数据放到指定的元素(通常是div元素)中. 2.说的再具体一些就是,把获取到的数据插入到当前文档的某个div元素中. ser ...
- Flume NG源代码分析（二）支持执行时动态改动配置的配置模块
在上一篇中讲了Flume NG配置模块主要的接口的类,PropertiesConfigurationProvider提供了基于properties配置文件的静态配置的能力,这篇细说一下PollingP ...
- ACdream区域赛指导赛之手速赛系列(7)
A -Dragon Maze Time Limit: 2000/1000MS (Java/Others)Memory Limit: 128000/64000KB (Java/Others) Submi ...
- LeetCode 941. Valid Mountain Array (有效的山脉数组)
题目标签:Array 题目给了一组int array A,让我们判断它是否是 一个山脉数组. 山脉数组一定要有一个最高值,然后要同时有 山坡和下坡. 想法是,从左边开始依次比较两个数字,int[0] ...
- 适合国内网速的CDH5安装
0.集群规划 说明:因为CDH能够方便的动态加入删除主机,动态改变主机上的服务,所以后面再对各机器上跑得服务进行分配. 共三台机器 操作系统: centos6.5 机器名:work01.work02. ...