注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

Bioinformatics home

 
 
 

日志

 
 

jquery tree 控件 +contextMenu事件和树的拖放  

2009-05-07 12:38:12|  分类: Jquery |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="TaoCanSet.aspx.cs" Inherits="_ERProduce_TaoCanSet" %>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>

    <script src="../../Scripts/jquery.js" type="text/javascript"></script>

    <script src="../../Scripts/tab.js" type="text/javascript"></script>

    <link href="../../Scripts/tab.css" rel="stylesheet" type="text/css" />

    <link href="../../Scripts/simpletree/simlpetree.css" rel="stylesheet" type="text/css" />

    <script src="../../Scripts/simpletree/jquery.simple.tree.js" type="text/javascript"></script>

    <style type="text/css">
        .contextMenu
        {
            display: none;
            position: absolute;
            background: #fff;
            border: #999 1px solid;
            width: auto;
            height: auto;
            z-index: 499;
            opacity: 0.9;
        }
        .contextMenu li
        {
            list-style-type: none;
            text-align: left;
            padding: 5px;
        }
        .contextMenu li:Hover
        {
            background-color: #0066CC;
            color: #FFFFFF;
            cursor: pointer;
        }
        #tab_menu
        {
            padding: 0px;
            width: 100%;
            height: 60px;
            overflow: hidden;
        }
        #page
        {
            margin-top: -30px;
            width: 850px;
            height: 800px;
            border: solid 1px #cccccc; /*height: expression(parentNode . parentNode . offsetHeight-25);*/
        }
    </style>
</head>
<body style="padding: 20px;">
    <form id="Form1">
 
    <table>
        <tr>
            <td valign="top" style="width: 300px;">
                <ul class="simpleTree" id="simpleTree" style="font-size: 12px;">
                    <li class="root" id='root'><span>套餐名称</span>
                        <%=tv1%>
                    </li>
                </ul>
                <div class="contextMenu" id="myMenu1" style="display: none;">
                    <ul>
                        <li id="new">新建套餐</li>
                        <li id="edit">编辑套餐</li>

                    </ul>
                </div>
                <div class="contextMenu" id="myMenu2" style="display: none;">
                    <ul>
                        <li id="fedit">分类名称</li>
                    </ul>
                </div>
            </td>
            <td>
                <span id="dec" style="color: Red; font-size: 12px;"></span>
                <div id="tab_menu">
                </div>
                <div id="page">
                </div>
            </td>
        </tr>
    </table>
    </form>

    <script language="javascript">
        var tab = null;
        var simpleTree;      
        $(function() {
            tab = new TabView({
                containerId: 'tab_menu',
                pageid: 'page',
                cid: 'tab_po'
            });

            simpleTree = $('.simpleTree').simpleTree({
                    autoclose: false,
                    afterClick: function(node) {
                        //alert("text-"+$('span:first',node).text());
                    },
                    afterDblClick: function(node) {
                        //alert("text-"+$('span:first',node).text());
                    },
                    afterMove: function(destination, source, pos) {
                        //alert("destination-"+destination.attr('id')+" source-"+source.attr('id')+" pos-"+pos);
                    
                    var _this = source.attr('id');
                    var p = null;
                    if (destination[0].id !="root") {
                              p = destination.attr("id");
                          }

                          var para = "{'str':'{0}',_this:{1},'p':{2}}";
                          var _str = "";
                          source.closest("ul").find("span").each(function() {
                              _str += $(this).attr("ref") + ",";
                          });
                          para = $.formart(para,_str.slice(0, -1),_this, p).replace("undefined", "null");
                          $.ajax({
                              type: "POST",
                              dataType: "json",
                              url: '../ws_sort.asmx/TaoCanNameSort',
                              contentType: "application/json; charset=utf-8",
                              data: para,
                              success: function() {
                                  var str = $("#dec").text();
                                  $("#dec").hide("slow").show("slow").text(str.replace("_成功设置默认排序", "") + "_成功设置默认排序");

                              },
                              error: function() {
                                  alert("程序错误,请再度试验或上报!");

                              }
                          });
                    
                    
                    },
                    afterAjax: function() {
                        //alert('Loaded');
                    },
                    afterContextMenu: function(element, event) {
                        var className = element.attr('class');
                        if (className.indexOf('doc') >= 0) {
                            $('#myMenu1').css('top', event.pageY).css('left', event.pageX).show
                            
                        }
                        else {
                            $('#myMenu2').css('top', event.pageY).css('left', event.pageX).show();
                        }
                        $('*').click(function() { $('#myMenu1, #myMenu2').hide(); });
                    },
                    animate: true
                    //docToFolderConvert:true
                });
            });

            $('#fedit').click(function() {

                var el = simpleTree.get(0).getSelected();
                var id = el.find('span').eq(0).attr("ref");
                var name = el.find('span').eq(0).text();
                //alert(id);
                var fenleiid = "fenleiid";
                var url = "TaoCan.aspx" + (id?"?id=" + id:"");
                //alert(url);


                if (!($('#' + fenleiid)[0])) {
                    tab.add({
                        id: fenleiid,
                        title: "套餐分类编辑",
                        url: url,
                        isclosed: true
                    });

                }
                else {
                    tab.update({
                        id: fenleiid,
                        title: "套餐分类编辑",
                        url: url,
                        isclosed: true
                    });

                }
                $("#dec").hide("slow").show("slow").text("套餐分类编辑:" + name);
                return false;

            });
            $('#myMenu1 ul li').click(function() {

                var el = simpleTree.get(0).getSelected();
                var id = el.find('span').eq(0).attr("ref");
                var name = el.find('span').eq(0).text();
                switch (this.id) {
                    case 'new':

                        if (!($('#addgy')[0])) {
                            tab.add({
                                id: 'addgy',
                                title: "新建套餐",
                                url: "TaoCan.aspx",
                                isClosed: true
                            });

                        }
                        else {
                            tab.update({
                                id: 'addgy',
                                title: "新建套餐",
                                url: "TaoCan.aspx",
                                isClosed: true
                            });
                        };
                        $("#dec").hide("slow").show("slow").text("新建套餐:");
                        break;
                    case 'edit':
                        if (!($('#editid')[0])) {
                            tab.add({
                                id: 'editid',
                                title: "编辑套餐",
                                url: "TaoCan.aspx?id=" + id,
                                isClosed: true
                            });

                        }
                        else {
                            tab.update({
                                id: 'editid',
                                title: "编辑套餐",
                                url: "TaoCan.aspx?id=" + id,
                                isClosed: true
                            });

                        };
                        $("#dec").hide("slow").show("slow").text("编辑套餐:" + name)
                        break;                  

                }
                return false;
            });

        function updated() {//ajax
            //tb_remove();
            window.location.href = window.location.href;
        };
    </script>

</body>
</html>




cs代码:
using System;
using System.Text;
using System.Linq;
using System.Web.UI;
using System.Web.UI.WebControls;
using LinqHelper;
using System.Collections.Generic;


public partial class _ERProduce_TaoCanSet : Page
{
    ErpDataContext db = dbLinq.GetErpData();
    public string tv1;
    protected void Page_Load(object sender, System.EventArgs e)
    {
        if (!Page.IsPostBack)
        {
            //stv1.Nodes.Clear();
            StringBuilder sb = new StringBuilder();
            BindTree1(db._GY_套餐名表.Where(z => z._GY_套餐分类ID == null).OrderBy(x=>x._GY_套餐排序号).ToList(),sb);
            tv1 = sb.ToString();
        }
    }



    private void BindTree1(List<_GY_套餐名表> _gys, System.Text.StringBuilder sb)
    {
        sb.Append("<ul>\n");
        if (_gys.Count() > 0)
        {
            foreach (var _tr in _gys)
            {
                sb.Append(string.Format("<li class='{2}' id='{0}'><span  ref='{0}'>{1}</span>", _tr._GY_套餐ID.ToString(), _tr._GY_套餐名称, _tr._GY_套餐是否分类用 == true ? "open" : ""));
                if (_tr._GY_套餐是否分类用 == true)
                {
                    BindTree1(db._GY_套餐名表.Where(z => z._GY_套餐分类ID == _tr._GY_套餐ID).OrderBy(x => x._GY_套餐排序号).ToList(), sb);
                }
                sb.Append("</li>");
            }
        }
        else {
            sb.Append("<li class='line-last'/>");
        }
        sb.Append("</ul>");
    }

 

    #region Web Form Designer generated code
    override protected void OnInit(EventArgs e)
    {
        //
        // CODEGEN: This call is required by the ASP.NET Web Form Designer.
        //
        // DetailsView1.HeaderText = "菜单编辑";
        InitializeComponent();
        base.OnInit(e);
    }

    /// <summary>
    /// Required method for Designer support - do not modify
    /// the contents of this method with the code editor.
    /// </summary>
    private void InitializeComponent()
    {
    }
    #endregion


  


}

  评论这张
 
阅读(2779)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017