easyUI左右菜单 skyCc

<!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;
            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; 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; 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; 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({
                200,
                height: 350,
                url: 'GY_YONGHUJSList.aspx?action=getlist1&timeid=' + Math.random() + '',
                method: "GET",
                singleSelect: true
            });
        }

        //绑定数据到用户列表
        function BinDingGride2() {
            var uid = '<%=Uid %>';
            $('#Gride2').datagrid({
                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>

原文地址:https://www.cnblogs.com/cmzcheng/p/2453434.html