7，下拉菜单（带 checkbox 的多选）

最新推荐文章于 2021-08-19 17:43:59 发布

weixin_33786077

最新推荐文章于 2021-08-19 17:43:59 发布

阅读量520

点赞数

文章标签： xhtml ui c#

原文链接：http://blog.51cto.com/962410314/1596039

版权

-----后台

 using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Text;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
    }

    public string GetzNodes()
    {
        StringBuilder sb = new StringBuilder();
        sb.Append("<script>");
        sb.Append("var zNodes =[");
        //*****************************************加入遍历代码
        for (int i = 0; i < 100; i++)
        {
            if (i > 50)
            {
                sb.Append(SetParametes(i.ToString(), "1", "b"));
            }
            else
            sb.Append(SetParametes(i.ToString(), "-1", "a"));
        }
        //********************************************************
        sb.Append("];");
        sb.Append("</script>");
        return sb.ToString();
    }
    /// <summary>
    /// 设置节点
    /// </summary>
    /// <param name="id">id</param>
    /// <param name="pid">父级id</param>
    /// <param name="name">名称</param>
    /// <param name="open">是否展开？</param>
    /// <returns>返回节点</returns>
    private string SetParametes(string id, string pid, string name,bool open=false)
    {
        StringBuilder sb = new StringBuilder();
        sb.Append("{");
        sb.AppendFormat("id:{0},",id);
        sb.AppendFormat("pId:{0},",pid);
        if (open)
        {
            sb.AppendFormat("name:\"{0}\",", name);
            sb.Append("open: true");
        }
        else
        {
            sb.AppendFormat("name:\"{0}\"", name);
        }
        sb.Append("},");
        return sb.ToString();
    }
}

-----前台

 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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>
    <link href="../css/demo_new.css" rel="stylesheet" type="text/css" />
    <link href="../css/zTreeStyle/zTreeStyle.css" rel="stylesheet" type="text/css" />
    <script src="../js/jquery-1.4.4.min.js" type="text/javascript"></script>
    <script src="../js/jquery.ztree.core-3.5.js" type="text/javascript"></script>
    <script src="../js/jquery.ztree.excheck-3.5.js" type="text/javascript"></script>
    
    
</head>
<%=GetzNodes()%>
<script type="text/javascript">
    var setting = { check: { enable: true, 
    chkboxType: { "Y": "ps", "N": "ps"} }//
    //chkboxType: { "Y": "p", "N": "ps"}}//父级联动
    //chkboxType : { "Y": "s", "N": "ps" } }//子级联动
    //chkboxType : { "Y": "", "N": "ps" } }//不联动
    
    ,view: {dblClickExpand: false},data: {simpleData: {enable: true}},callback: {beforeClick: beforeClick,onCheck: onCheck}};
    $(document).ready(function () {$.fn.zTree.init($("#treeDemo"), setting, zNodes); });
    function beforeClick(treeId, treeNode) {
        var zTree = $.fn.zTree.getZTreeObj("treeDemo");
        zTree.checkNode(treeNode, !treeNode.checked, null, true);
        return false;
    }
    function showMenu() {
        var cityObj = $("#citySel");
        var cityOffset = $("#citySel").offset();
        $("#menuContent").css({ left: cityOffset.left + "px", top: cityOffset.top + cityObj.outerHeight() + "px" }).slideDown("fast");
        $("body").bind("mousedown", onBodyDown);
    }
    function hideMenu() {
        $("#menuContent").fadeOut("fast");
        $("body").unbind("mousedown", onBodyDown);
    }
    function onBodyDown(event) {
        if (!(event.target.id == "menuBtn" || event.target.id == "citySel" || event.target.id == "menuContent" || $(event.target).parents("#menuContent").length > 0)) {
            hideMenu();
        }
    }
    $(document).ready(function () {
        $.fn.zTree.init($("#treeDemo"), setting, zNodes);
    });
    //选中之后触发的事件
    function onCheck(e, treeId, treeNode) {
        //ids：存放着一组id
        //v：存放着一组值
        var ids = "";
        var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
   nodes = zTree.getCheckedNodes(true),
   v = "";
        for (var i = 0, l = nodes.length; i < l; i++) {
            v += nodes[i].name + ",";
            ids += nodes[i].id + ",";
        }
        if (v.length > 0) v = v.substring(0, v.length - 1);
        if (ids.length > 0) ids = ids.substring(0, ids.length - 1);
        var cityObj = $("#citySel");
        cityObj.attr("value", v);
    }
</script>
<body>
    <form id="form1" runat="server">
        <!------------------Treediv--------------------->
        <div class="zTreeDemoBackground left">
      <ul class="list">
       <li class="title"><asp:TextBox ID="citySel" ReadOnly="true" runat="server"></asp:TextBox>&nbsp;<a id="A1" href="#" οnclick="showMenu(); return false;">选择</a></li>
      </ul>
     </div>
        <div id="menuContent" class="menuContent" style="display:none; position: absolute;">
         <ul id="treeDemo" class="ztree" style="margin-top:0; width:160px;"></ul>
        </div>
        <!------------------Treediv--------------------->
          
    </form>
</body>
</html>