zoukankan      html  css  js  c++  java
  • jquery插件编写和使用

    插件描述:

    功能强大的Tree控件.

    说明:

    12320项目原本使用的jquery.treeview插件,此插件需要自己实现html标签的编写,

    插件使用:

    一、     在ThinksKing的Plugins里面找到JQuery zTree v3.0 beta,将Js和Css添加到项目中。

    二、     使用zTree:

    1.1          添加Jquery和zTree的引用。

        <link href="http://www.cnblogs.com/Content/zTree/zTreeStyle.css" rel="stylesheet" type="text/css" />

        <script src="http://www.cnblogs.com/Scripts/Plugin/ZTree/jquery.ztree.core-3.0.min.js" type="text/javascript"></script>//核心代码

        <script src="http://www.cnblogs.com/Scripts/Plugin/ZTree/jquery.ztree.excheck-3.0.min.js" type="text/javascript"></script>// checkbox扩展

    1.2          添加zTreeNode类(PS:注意大小写,对应参数要与文档中一致,否则需要对应参数容易出错,如果报null错,一般是参数对应出错):

    public class ZTreeNode

        {

            public string id { get; set; }

            public string pId { get; set; }

            public string name { get; set; }

            public string url { get; set; }

            public string target { get; set; }

    }

    1.3          异步调用

    脚本代码:

         var url = '<%=Url.Action("GetGroups","ContactPerson") %>';

         var zTreeObj = null;

         var setting = {

             check: { //开启checkbox选项

                 enable: true,

                 chkBoxType: { "Y": "s", "N": "s" }//参看api

             },

             async: { //开启异步

     enable: true,

                 url: url

             },

             data: {//参看api

                 key: {

                 },

                 simpleData: { //简单数据模式

                     enable: true

                 }

             }

         };

         $(document).ready(function() {

             $.fn.zTree.init($('#tree'), setting);

             zTreeObj = $.fn.zTree.getZTreeObj("tree");

         });

    zTreeObj为父窗体的全局变量,可以在iframe的子窗体中使用:window.parent.zTreeObj 获取此对象.

    页面代码:

      <ul id="tree" class="ztree"></ul>

    控制器代码:

    /// <summary>

            /// 获取用户组

            /// </summary>

            /// <returns></returns>

            public ActionResult GetGroups()

            {

                List<SM_Group> groups = ShortMessageHelper.GetGroups(User.Id);

                List<ZTreeNode> nodes = new List<ZTreeNode>();

                foreach (var item in groups)

                {

                    ZTreeNode zNode = new ZTreeNode();

                    zNode.id = item.GroupId.ToString();

                    zNode.name = item.GroupName;

                    zNode.url = Url.Action("SearchContactPerson", "ContactPerson", new { groupId = item.GroupId });

                    zNode.pId = "";

                    if (item.ParentId.HasValue)

                        zNode.pId = item.ParentId.ToString();

                    zNode.target = "mainFrame";

                    nodes.Add(zNode);

                }   

      

                return Json(nodes);

            }

  • 相关阅读:
    数値処理
    linux使用rsync+inotify-tools+ssh实现文件实时同步
    Linux内核分析第九次作业
    Linux内核原理第八次作业
    Linux内核分析第七次作业
    Linux内核分析第六次作业
    《Linux内核原理与设计》第五周作业
    《Linux内核原理与分析》第四次作业
    Linux内核分析第三次作业
    Linux内核分析第二次作业
  • 原文地址:https://www.cnblogs.com/pengjun110/p/3485368.html
Copyright © 2011-2022 走看看