easyUI左右菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<link rel="stylesheet" type="text/css" href="../jquery-easyui-1.2.5/themes/default/easyui.css" />
<link rel="stylesheet" type="text/css" href="../jquery-easyui-1.2.5/themes/icon.css" />
<script type="text/javascript" src="../jquery-easyui-1.2.5/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="../jquery-easyui-1.2.5/jquery.easyui.min.js"></script>
<script src="../JavaScript/jquery.form.js" type="text/javascript"></script>
<style type="text/css">
html, body, form
{
margin: 0px;
padding: 0px;
font-size: 9pt;
font-family: "宋体" , "Helvetica Neue" , "Lucida Grande" , "Segoe UI" , Arial, Helvetica, Verdana, sans-serif;
background-color: #FCFCFC;
}
html, body
{
background: #FFF;
margin: 0px;
padding: 0px;
}
/*----弹出窗口内容展现样式-----*/
.popup-content
{
font-size: 10pt;
color: #1542A2;
}
.popup-content tr
{
height: 28px;
}
.popup-content th
{
text-align: right;
width: 80px;
color: #0066FF;
}
.popup-content td
{
color: #000000;
}
/*----------------------------*/
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
用户<span id="span_yonghuming"></span> 的角色设置
<br />
<div style="float: left;">
待选的角色
<div style="height: 350px; width: 200px; padding: 0px;">
<table id="Gride1" idfield="YONGHUDLM">
<thead>
<tr>
<th field="JUESEMC" width="195">
角色名称
</th>
<th field="JUESEID" hidden="true">
隐藏的id
</th>
</tr>
</thead>
</table>
</div>
</div>
<div style="float: left; height: 350px; width: 45px; text-align: center; padding-top: 140px;">
<asp:Button ID="btn1" runat="server" Text="8" Width="30" Font-Names="Webdings" Font-Size="16px"
OnClientClick="SelectAllToRight(); return false;" /><br />
<asp:Button ID="btn2" runat="server" Text="4" Width="30" Font-Names="Webdings" Font-Size="16px"
OnClientClick="SelectToRight();return false;" /><br />
<asp:Button ID="btn3" runat="server" Text="3" Width="30" Font-Names="Webdings" Font-Size="16px"
OnClientClick="SelectToLeft();return false;" Style="height: 26px" /><br />
<asp:Button ID="btn4" runat="server" Text="7" Width="30" Font-Names="Webdings" Font-Size="16px"
OnClientClick="SelectAllToLeft();return false;" />
</div>
<div style="float: left">
已选的角色
<div style="height: 350px; width: 200px;">
<table id="Gride2" idfield="YONGHUDLM">
<thead>
<tr>
<th field="JUESEMC" width="195">
角色名称
</th>
<th field="JUESEID" hidden="true">
隐藏的id
</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
<div style="position: absolute; bottom: 30px; left: 140px">
<a class="easyui-linkbutton" iconcls="icon-ok" href="javascript:void(0)" onclick="BaoCun();">
保存</a> <a class="easyui-linkbutton" iconcls="icon-cancel" href="javascript:void(0)"
onclick="window.parent.$('#win_FenPeiJS').window('close');">取消</a>
</div>
<script language="javascript" type="text/javascript">
$(document).ready(function () {
BinDingGride1();
BinDingGride2();
GetUser();
});
function SelectToRight() {
var row = $('#Gride1').datagrid('getSelected');
if (row) {
toright(row);
}
}
function SelectAllToRight() {
var grides = $('#Gride1').datagrid('getRows');
$(grides).each(function () {
toright(this);
});
}
function SelectToLeft() {
var row = $('#Gride2').datagrid('getSelected');
if (row) {
toleft(row);
}
}
function SelectAllToLeft() {
var grides = $('#Gride2').datagrid('getRows');
$(grides).each(function () {
toleft(this);
});
}
function toright(row) {
if (row) {
var index = $('#Gride1').datagrid('getRowIndex', row);
$('#Gride1').datagrid('deleteRow', index);
}
var lastIndex;
$('#Gride2').datagrid('appendRow', {
JUESEMC: row.JUESEMC,
JUESEID: row.JUESEID
});
lastIndex = $('#Gride2').datagrid('getRows').length - 1;
$('#Gride2').datagrid('selectRow', lastIndex);
}
function toleft(row) {
if (row) {
var index = $('#Gride2').datagrid('getRowIndex', row);
$('#Gride2').datagrid('deleteRow', index);
}
var lastIndex;
$('#Gride1').datagrid('appendRow', {
JUESEMC: row.JUESEMC,
JUESEID: row.JUESEID
});
lastIndex = $('#Gride1').datagrid('getRows').length - 1;
$('#Gride1').datagrid('selectRow', lastIndex);
}
//绑定数据到用户列表
function BinDingGride1() {
$('#Gride1').datagrid({
width: 200,
height: 350,
url: 'GY_YONGHUJSList.aspx?action=getlist1&timeid=' + Math.random() + '',
method: "GET",
singleSelect: true
});
}
//绑定数据到用户列表
function BinDingGride2() {
var uid = '<%=Uid %>';
$('#Gride2').datagrid({
width: 200,
height: 350,
url: 'GY_YONGHUJSList.aspx?id=' + uid + '&action=getlist2&timeid=' + Math.random() + '',
method: "GET",
singleSelect: true
});
}
function GetUser() {
var uid = '<%=Uid %>';
$.ajax({
type: "POST", //必须要用POST
url: "GY_YONGHUJSList.aspx/GetUser",
data: "{uid:" + uid + "}", //data必须和contentType同时出现,如果没有参数传入,就算给个空值也要写的。如:data: "{}",
contentType: "application/json; charset=utf-8;", //这个也是必须的
dataType: "json",
async: false, //同步请求,设为false将会锁住浏览器
success: function (result) {
$("#span_yonghuming").html(result.d);
},
error: function (x, textStatus) {
alert(x.responseText);
}
});
}
</script>
</form>
</body>
</html>