首頁 > 開發者 > JavaScript
一、測試的資料（JSON格式，用預存程序產生的） [javascript] [{"count":16,"list":[{"MenuID":3,"MenuName":"資訊管理","MenuCode":"msg","MenuCount":2,"MenuList":[{"MenuID":4,"MenuName":"資訊發布","MenuCode":"msg_publis"},{"MenuID":5,"MenuName":"資訊列表","MenuCode":"msg_list"}]},{"MenuID":6,"MenuName":"會員管理","MenuCode":"user","MenuCount":1,"MenuList":[{"MenuID":7,"MenuName":"會員列表","MenuCode":"user_list"}]},{"MenuID":8,"MenuName":"積分管理","MenuCode":"jf","MenuCount":1,"MenuList":[{"MenuID":9,"MenuName":"積分類別","MenuCode":"jf_type"}]},{"MenuID":10,"MenuName":"發行管理","MenuCode":"ps","MenuCount":1,"MenuList":[{"MenuID":11,"MenuName":"標籤管理","MenuCode":"ps_lable"}]},{"MenuID":13,"MenuName":"管理員管理","MenuCode":"admin","MenuCount":4,"MenuList":[{"MenuID":14,"MenuName":"Administrator 群組","MenuCode":"admin_gp"},{"MenuID":15,"MenuName":"許可權管理","MenuCode":"admin_rule"},{"MenuID":43,"MenuName":"管理員列表","MenuCode":"admin_list"},{"MenuID":45,"MenuName":"部門管理","MenuCode":"admin_bm"}]},{"MenuID":16,"MenuName":"商品管理","MenuCode":"sp","MenuCount":2,"MenuList":[{"MenuID":26,"MenuName":"商品列表","MenuCode":"sp_list"},{"MenuID":27,"MenuName":"商品類別","MenuCode":"sp_type"}]},{"MenuID":17,"MenuName":"活動管理","MenuCode":"hd","MenuCount":1,"MenuList":[{"MenuID":28,"MenuName":"活動列表","MenuCode":"hd_list"}]},{"MenuID":18,"MenuName":"支付管理","MenuCode":"pay","MenuCount":1,"MenuList":[{"MenuID":29,"MenuName":"支付介面管理","MenuCode":"pay_api"}]},{"MenuID":19,"MenuName":"簡訊管理","MenuCode":"sms","MenuCount":2,"MenuList":[{"MenuID":30,"MenuName":"簡訊發送","MenuCode":"sms_send"},{"MenuID":31,"MenuName":"簡訊列表","MenuCode":"sms_list"}]},{"MenuID":20,"MenuName":"代金券管理","MenuCode":"djq","MenuCount":2,"MenuList":[{"MenuID":32,"MenuName":"代金券發放","MenuCode":"djq_send"},{"MenuID":33,"MenuName":"代金券列表","MenuCode":"djq_list"}]},{"MenuID":21,"MenuName":"優惠券管理","MenuCode":"yhq","MenuCount":2,"MenuList":[{"MenuID":34,"MenuName":"優惠券發放","MenuCode":"yhq_send"},{"MenuID":35,"MenuName":"優惠券列表","MenuCode":"yhq_list"}]},{"MenuID":22,"MenuName":"現金券管理","MenuCode":"xjq","MenuCount":2,"MenuList":[{"MenuID":36,"MenuName":"現金券發放","MenuCode":"xjq_send"},{"MenuID":37,"MenuName":"現金券列表","MenuCode":"xjq_list"}]},{"MenuID":23,"MenuName":"物流管理","MenuCode":"wl","MenuCount":1,"MenuList":[{"MenuID":38,"MenuName":"物流公司管理","MenuCode":"wl_cmp"}]},{"MenuID":24,"MenuName":"訂單管理","MenuCode":"order","MenuCount":1,"MenuList":[{"MenuID":39,"MenuName":"訂單列表","MenuCode":"order_list"}]},{"MenuID":25,"MenuName":"店鋪管理","MenuCode":"shop","MenuCount":1,"MenuList":[{"MenuID":40,"MenuName":"店鋪列表","MenuCode":"shop_list"}]},{"MenuID":51,"MenuName":"網站設定","MenuCode":"site","MenuCount":2,"MenuList":[{"MenuID":42,"MenuName":"後台菜單管理","MenuCode":"site_menu"},{"MenuID":49,"MenuName":"網站資訊設定","MenuCode":"site_cfg"}]}]}] 二、ASPX頁面代碼 [html] <%@ Page Language="C#" AutoEventWireup="true" CodeFile="AdminRules.aspx.cs" Inherits="Manager_Admins_AdminRules" %> <!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 runat="server"> <title>許可權管理</title> <script type="text/javascript" src="../../Scripts/Jquery/jquery-1.6.2.js"></script> <script type="text/javascript" src="js/AdminRules.js"></script> <style type="text/css"> ul { list-style: none; text-align: left; } </style> </head> <body> <form id="form1" runat="server"> <div id="div_info"> </div> <div id="div_content"> </div> <div> <input type="button" id="btn_save" value="儲存" onclick="GetRules()" /> <input type="hidden" id="h_Rules" /> </div> </form> </body> </html> 三、AdminRules.js代碼 [javascript] $(document).ready(function (e) { var dd; $.ajax({ type: "POST", data: "g_cmd=get", url: "Ashx/AdminRules.ashx", contentType: "application/x-www-form-urlencoded; charset=utf-8", dataType: "text", success: function (text) { CreteHtml(text); }, error: function (request, message, ex) { alert("錯誤：" + message); } }); }) //動態建立checkbox集合 function CreteHtml(json) { var dataObj = eval(json); var table = $("<table id='tb_content' border='1'><tr><td> </td><td>功能名稱</td><td>許可權選項</td></tr>"); table.appendTo($("#div_content")); $.each(dataObj[0].list, function (idx, item) { var tr = $("<tr></tr>"); var tdcbox = $("<td></td>"); var td = $("<td>" + item.MenuName + "</td>"); var cb = $("<input type='checkbox' id='" + item.MenuCode + "' onclick='CheckAll(this.id)' />"); cb.appendTo(tdcbox); tdcbox.appendTo(tr); td.appendTo(tr); tr.appendTo(table); td = $("<td></td>"); var menus = item.MenuList; $.each(menus, function (idx1, item1) { var ul = $("<ul></ul>"); var li_ruls = $("<li><input type='checkbox' id='" + item1.MenuCode + "_mody' onclick='CheckParent(this.id)' />修改<input type='checkbox' id='" + item1.MenuCode + "_add' onclick='CheckParent(this.id)' />增加<input type='checkbox' id='" + item1.MenuCode + "_del' onclick='CheckParent(this.id)' />刪除</li>"); var li = $("<li><input type='checkbox' id='" + item1.MenuCode + "' onclick='CheckParent(this.id)' />" + item1.MenuName + "</li>"); li.appendTo(ul); li_ruls.appendTo(ul); ul.appendTo(td); td.appendTo(tr); tr.appendTo(table); }); }); $("#div_content").append("</table>"); } //全選全不全功能 function CheckAll(id) { if ($("input[type=checkbox][id='" + id + "']").is(":checked")) { $("input[type=checkbox][id^='" + id + "']").attr("checked", true);//當前ID開頭的checkbox全選 } else { $("input[type=checkbox][id^='" + id + "']").attr("checked", false); //當前ID開頭的checkbox全不選 } } //checkbox聯動 function CheckParent(id) { CheckAll(id);//先進行是否全選的操作 var s_ParentID = id.substring(0, id.indexOf('_'));//取得一級checkbox的id var s_tmp = id.substring(id.indexOf('_') + 1, id.length); s_tmp = s_tmp.substring(0, s_tmp.indexOf('_')); var s_ParentID_ID = s_ParentID + "_" + s_tmp;//取得二級checkbox的id var tf = false;//一級checkbox是否全選 var tf1 = false;//二級checkbox是否全選 if (!s_tmp == "")//為空白的話說明是點擊的二級checkbox，不用判斷三級checkbox的狀態 { if (!$("input[type=checkbox][id='" + s_ParentID_ID + "']").is(":checked")) { $("input[type=checkbox][id='" + s_ParentID_ID + "']").attr("checked", true);//如果三級checkbox有選中的情況，二級的checkbox也會選中 } else { l = $("input[type=checkbox][id^='" + s_ParentID_ID + "']");//擷取三級checkbox的集合 $.each(l, function (idx, item)//迴圈 { if (s_ParentID_ID != $(item)[0].id)//不判斷自己(二級checkbox) { if ($("input[type=checkbox][id='" + $(item)[0].id + "']").is(":checked")) { tf1 = true;//如果三級checkbox有選中的直接賦值為true並退出each return false; } } }) $("input[type=checkbox][id='" + s_ParentID_ID + "']").attr("checked", tf1);//更新二級checkbox的選中狀態 } } if (!$("input[type=checkbox][id='" + s_ParentID + "']").is(":checked")) { $("input[type=checkbox][id='" + s_ParentID + "']").attr("checked", true); //如果二級checkbox有選中的情況，一級的checkbox也會選中 } else { var l = $("input[type=checkbox][id^='" + s_ParentID + "']"); //擷取二級checkbox的集合 $.each(l, function (idx, item)//迴圈 { if (s_ParentID != $(item)[0].id)//不判斷自己(一級checkbox) { if ($("input[type=checkbox][id='" + $(item)[0].id + "']").is(":checked")) { tf = true; //如果二級checkbox有選中的直接賦值為true並退出each return false; } } }) $("input[type=checkbox][id='" + s_ParentID + "']").attr("checked", tf); //更新一級checkbox的選中狀態 } } 四、AdminRules.ashx代碼直接context.Response.Write第一條的字串即可。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
