仿百度文库文档上传页面的多级联动分类选择器第二版，支持在一个页面同一时候使用多个分类选择器。

此版本号把HTML，CSS，以及图片都封装到“category.js”中。解决因文件路径找不到样式及图片的问题。

源代码下载地址：http://download.csdn.net/detail/testcs_dn/7290577

初始状态，一个页面使用两个，能够初始化之前选中的分类：

选择状态：

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdGVzdGNzX2Ru/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="" />

当选中一个分类后，会触发“onChange”事件，如上图中的“您选择的分类编号为：xxx 隐藏输入域的内容为:xxx”。就是通过“onChange”事件输出的。

页面调用代码及说明：

<!DOCTYPE html>

<html>

<head>

    <title>category</title>

    <script type="text/javascript" src="jquery-1.10.2.min.js"></script>

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

<script type="text/javascript">

    $(document).ready(function () {

        //创建一个新的分类选择器。支持一个页面中使用多个分类选择器

        //可选择配置信息,默认值。说明：

        //sourceData:{ list:[] },                           //array:分类数据源。格式參考：data/categorySourceData.js

        //textDefault:"\u8BF7\u9009\u62E9\u5206\u7C7B",     //string:没有选择分类时的提示文字

        //onChange:null,                                    //event:当用户选中最后一级节点时触发

        //onSelect:null,                                    //event:当用户单击一个分类时触发。此事件在onChange之前触发

		//hidField											//string:隐藏值域的ID，能够自己指定。不指定的话实际的ID=默认ID+分类实例索引

															//onChange事件触发后，会将当前选中的分类赋值给此域。格式：1,17,14

        var category1 = $("#divCate1").category({ hidField: "hidField0", onSelect: function () {

            this.setCategoryName();

        },

            onChange: function (cid, level, text) {

                $("#divResult1").html("您选择的分类编号为：" + this.getCategoryCid() + "<br />隐藏输入域的内容为：" + $("#hidField0").val());

            }

        });

        //能够通过设置selectItems属性。设定初始选项

        category1.selectItems = [{ cid: 1 }, { cid: 11}];

        //重写获取分类的方法，能够在此方法中訪问后台页面，从数据库获取分类数据

        //cid:分类编号

        //level:分类级别

        //返回值格式：{list: [{pcid: 0,cid: 1,name: "\u6559\u80b2\u4e13\u533a",isLast: false},{pcid: 0,cid: 1,name: "\u6559\u80b2\u4e13\u533a",isLast:true}]}

        //节点属性说明：

        //pcid:父级分类编号，眼下没实用到

        //cid:分类编号

        //name:分类名称

        //isLast:是否为最后一级分类。须要依据此属性确定显示样式及响应逻辑

        category1.getCategory = function (cid, level) {

            var cate = null;

            $.ajax({

                type: "GET",

                async: false, //这里必须使用同步方式

                url: "data/categorySourceData.htm",

                data: "T=" + Math.random(),

                success: function (data) {

                    var sourceData = eval("(" + data + ")");

                    if (typeof cid == undefined || cid == null) {

                        cate = sourceData; //注意：这里直接return sourceData是不行的！

                        return cate;

                    }

                    if (sourceData.list) {

                        for (var i = 0; i < sourceData.list.length; i++) {

                            if (sourceData.list[i].cid == cid) {

                                cate = sourceData.list[i];

                                break;

                            }

                        }

                        if (cate == null) {

                            for (var i = 0; i < sourceData.list.length; i++) {

                                cate = category1._getCategory(sourceData.list[i], cid);

                                if (cate != null) {

                                    break;

                                }

                            }

                        }

                    }

                },

                error: function (data) {

                    alert(data);

                }

            });

            return cate;

        };

        //设置完毕后通过load方法载入

        category1.load();

        /////////======================================================================================

        var category2 = $("#divCate2").category({ onSelect: function (cid, level, name) {

            this.setCategoryName();

        },

            onChange: function (cid, level, text) {

                $("#divResult2").html("您选择的分类编号为：" + this.getCategoryCid() + "<br />隐藏输入域的内容为：" + $("#" + this.config.hidField).val());

            }

        });

        category2.selectItems = [{ cid: 4 }, { cid: 73 }, { cid: 193}];

        category2.getCategory = function (cid, level) {

            var cate = null;

            $.ajax({

                type: "GET",

                async: false,

                url: "data/categorySourceData.htm",

                data: "T=" + Math.random(),

                success: function (data) {

                    var sourceData = eval("(" + data + ")");

                    if (typeof cid == undefined || cid == null) {

                        cate = sourceData; //注意：这里直接return sourceData是不行的！

                        return cate;

                    }

                    if (sourceData.list) {

                        for (var i = 0; i < sourceData.list.length; i++) {

                            if (sourceData.list[i].cid == cid) {

                                cate = sourceData.list[i];

                                break;

                            }

                        }

                        if (cate == null) {

                            for (var i = 0; i < sourceData.list.length; i++) {

                                cate = category2._getCategory(sourceData.list[i], cid);

                                if (cate != null) {

                                    break;

                                }

                            }

                        }

                    }

                },

                error: function (data) {

                    alert(data);

                }

            });

            return cate;

        };

        //设置完毕后通过load方法载入

        category2.load();

    });

</script>

</head>

<body>

<!-- 分类选择代码開始 -->

<!-- 为防止样式被覆盖，这里所有使用行内样式 -->

    <div id="divCate1">

    </div>

<!-- 分类选择代码结束 -->

    <br />

    <br />

    <br />

    <br />

    <div id="divResult1"></div>

    <br />

    <br />

    <br />

    <br />

    <div id="divCate2"></div>

    <br />

    <br />

    <br />

    <br />

    <div id="divResult2"></div>

</body>

</html>

源代码下载地址：http://download.csdn.net/detail/testcs_dn/7290577

js仿百度文库文档上传页面的分类选择器_第二版的更多相关文章

  1. Java+FlexPaper+swfTools仿百度文库文档在线预览系统设计与实现

    笔者最近在给客户开发文档管理系统时,客户要求上传到管理系统的文档(包括ppt,word,excel,txt)只能预览不允许下载.笔者想到了百度文库和豆丁网,百度文库和豆丁网的在线预览都是利用flash ...

  2. 【ASP.NET 进阶】仿百度文库文档在线预览（支持格式.pdf,.doc,docx,xls,xlsx,.ppt,pptx）

    在[ASP.NET]PDF文件在线预览(类似百度文库)基础上进行了office文件到pdf文件的转换,然后在显示出来,效果如下: 问题说明: 1.请通过以下方式添加 Office COM 组件. 2. ...

  3. Java文档上传问题设计

    近期公司让做一个文档上传的功能,功能描写叙述大概是这样子滴 书籍名称.书籍定价.书籍封面图片(须要上传).文档内容 (须要上传) .还有其它相关的描写叙述信息. 我的设计  表 A  包括以上字段 , ...

  4. Solr.NET快速入门(九)【二进制文档上传】【完】

    二进制文档上传 SolrNet支持Solr"提取"功能(a.k.a. Solr"Cell")从二进制文档格式(如Word,PDF等)索引数据. 这里有一个简单的 ...

  5. 多文档上传(upload multiple documents)功能不能使用怎么办？

    问题描述: 在SharePoint 2010的文档库里选择documents标签,然后选择upload document下拉菜单,你会发现upload multiple documents那个按钮是灰 ...

  6. SharePoint 2013 文档上传的多种形式

    SharePoint 2013 中的某些功能需要使用 ActiveX 控件.这会在不支持 ActiveX 的浏览器上产生限制.目前只有 32 位版本的 Internet Explorer 支持此功能. ...

  7. IE使用多彩文档上传数据库报错

    使用多彩文档,用IE浏览器提交表单,双引号里面包含单引号,导致数据库插入不了,而用chrome浏览器不会报错,自动过滤单引号, 解决:content.replace("'", &q ...

  8. sharepoint list 文档上传和删除

    最近项目需要对sharepoint 文件操作,于是自己写了一个简单的工具类分享出来: namespace Microsoft.SharePoint { using System; using Syst ...

  9. flexpaper上传带中文名字的文档，在页面显示若出现404错误时，请在server.xml文件中进行编码utf-8

    flexpaper上传带中文名字的文档,在页面显示若出现404错误时,请在server.xml文件中进行编码utf-8

随机推荐

  1. 认识xml

    什么是 XML? XML 指可扩展标记语言(EXtensible Markup Language) XML 是一种标记语言,很类似 HTML XML 的设计宗旨是传输数据,而非显示数据 XML 标签没 ...

  2. m元素集合的n个元素子集

    理论: 假设有5个元素的集点,取出3个元素的可能子集如下:{1 2 3}.{1 2 4 }.{1 2 5}.{1 3 4}.{1 3 5}.{1 4 5}.{2 3 4}.{2 3 5}.{2 4 5 ...

  3. .net网站开发（设计）：1.什么是MVC模式

    好吧我知道,应该很少人一开始学网站开发就从MVC开始,但如果你已经理解了三层架构之类的,那直接尝试强大的微软MVC网站开发模式也是挺不错的. 但其实我们学校有个实验室,那些干进去的就算是大一的学生,也 ...

  4. WAS下获取包路径下所有类

    最近做javaweb项目的混淆工作,用到proguard,该工具混淆.jar文件比较方便,故把所有项目代码和配置文件打成jar包, 生成的jar包经过proguard处理后,再次打包(解决progua ...

  5. sshd安全性能优化

    sshd服务是远程登录服务,默认端口为22,对于其优化一是为了增加服务器的安全,避免暴力破解:二是为了加快速度连接,减少不必要的带宽的浪费. sshd服务的配置文件为/etc/ssh/sshd_con ...

  6. Spring Ioc知识整理

    Ioc知识整理(一): IoC (Inversion of Control) 控制反转. 1.bean的别名 我们每个bean元素都有一个id属性,用于唯一标识实例化的一个类,其实name属性也可用来 ...

  7. excel笔记

    提取单元格中的数字部分 =MID(LOOKUP(1,-(1&MID(A1,MIN(FIND({0;1;2;3;4;5;6;7;8;9},A1&1/17)),ROW($1:$15)))) ...

  8. table中td,th不能设置margin

    首先,我们需要知道的是:我们可以对表格table设置margin,而不能设置padding;对单元格td设置padding,而不能设置margin.所以说,我们不能对单元格td设置margin属性来调 ...

  9. easyui控件的加载顺序

    使用easyui做布局时,会模仿窗口程序界面,做出一些较复杂的布局.按由外层到内层的顺序: (最外层)panel->tabs->tabs1 ->tabs2->layout-&g ...

  10. win32 调用多媒体函数PlaySound()

    必须引入此头文件 #include <mmsystem.h>#pragma comment(lib, "WINMM.LIB") /*------------------ ...