js仿百度文库文档上传页面的分类选择器_第二版
仿百度文库文档上传页面的多级联动分类选择器第二版，支持在一个页面同一时候使用多个分类选择器。
此版本号把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>
js仿百度文库文档上传页面的分类选择器_第二版的更多相关文章
- Java+FlexPaper+swfTools仿百度文库文档在线预览系统设计与实现
笔者最近在给客户开发文档管理系统时,客户要求上传到管理系统的文档(包括ppt,word,excel,txt)只能预览不允许下载.笔者想到了百度文库和豆丁网,百度文库和豆丁网的在线预览都是利用flash ...
- 【ASP.NET 进阶】仿百度文库文档在线预览（支持格式.pdf,.doc,docx,xls,xlsx,.ppt,pptx）
在[ASP.NET]PDF文件在线预览(类似百度文库)基础上进行了office文件到pdf文件的转换,然后在显示出来,效果如下: 问题说明: 1.请通过以下方式添加 Office COM 组件. 2. ...
- Java文档上传问题设计
近期公司让做一个文档上传的功能,功能描写叙述大概是这样子滴 书籍名称.书籍定价.书籍封面图片(须要上传).文档内容 (须要上传) .还有其它相关的描写叙述信息. 我的设计 表 A 包括以上字段 , ...
- Solr.NET快速入门(九)【二进制文档上传】【完】
二进制文档上传 SolrNet支持Solr"提取"功能(a.k.a. Solr"Cell")从二进制文档格式(如Word,PDF等)索引数据. 这里有一个简单的 ...
- 多文档上传(upload multiple documents)功能不能使用怎么办？
问题描述: 在SharePoint 2010的文档库里选择documents标签,然后选择upload document下拉菜单,你会发现upload multiple documents那个按钮是灰 ...
- SharePoint 2013 文档上传的多种形式
SharePoint 2013 中的某些功能需要使用 ActiveX 控件.这会在不支持 ActiveX 的浏览器上产生限制.目前只有 32 位版本的 Internet Explorer 支持此功能. ...
- IE使用多彩文档上传数据库报错
使用多彩文档,用IE浏览器提交表单,双引号里面包含单引号,导致数据库插入不了,而用chrome浏览器不会报错,自动过滤单引号, 解决:content.replace("'", &q ...
- sharepoint list 文档上传和删除
最近项目需要对sharepoint 文件操作,于是自己写了一个简单的工具类分享出来: namespace Microsoft.SharePoint { using System; using Syst ...
- flexpaper上传带中文名字的文档，在页面显示若出现404错误时，请在server.xml文件中进行编码utf-8
flexpaper上传带中文名字的文档,在页面显示若出现404错误时,请在server.xml文件中进行编码utf-8
随机推荐
- 【BZOJ1031】[JSOI2007]字符加密Cipher 后缀数组
[BZOJ1031][JSOI2007]字符加密Cipher Description 喜欢钻研问题的JS同学,最近又迷上了对加密方法的思考.一天,他突然想出了一种他认为是终极的加密办法 :把需要加密的 ...
- jsp用jstl标签比较枚举
日向博客最近在优化,有这一样一个小问题,我希望在下面的消息中心页面,未读的消息链接显示蓝色,已读的消息显示红色: 这就需要用jstl做一个判断. 之前的代码是这种形式: 消息中心:<br> ...
- ios常用的几个动画代码
#import "MianViewController.h" #import <QuartzCore/QuartzCore.h> @interface MianVi ...
- 一个操作EXCEL的C#类ExcelUtils
近期在公司里一直从事服务类的工作,涉及到非常多excel的处理.部分工作内容是每天反复的,仅仅是每天的数据不同而已.我遇到的一个问题是客户每天发送的几种数据有些excel中的字段顺序是一致的,有些是不 ...
- 自学HTML的几个例子
此处不赘述HTML中不同标签的用法仅仅给出自己学习时写的一些自娱自乐的例子,具体标签用法请参考W3C(http://www.w3school.com.cn/),毕竟这个才是最靠谱的,请不要相信任何二道 ...
- Reverse Linked List II java
public static ListNode reverseBetween(ListNode head, int m, int n) { ListNode pre=head,current=head, ...
- UIView的交换实现,子视图交替变换
其中加了一些动画 2016-01-13 其中主要的方法有:Demo下载地址,Demo中有介绍:https://github.com/lizhaojie001/UIview.git
- HDU 5730 - Shell Necklace
题意: 给出连续的1-n个珠子的涂色方法 a[i](1<=i<=n), 问长度为n的珠链共有多少种涂色方案 分析: 可以得到DP方程: DP[n] = ∑(i=1,n) (DP[n-i]* ...
- python面向对象(下)
继承 继承描述了基类的属性如何"遗传"给派生类.一个子类可以继承它的基类的任何属性,不管是数据属性还是方法.创建子类的语法看起来与普通(新式)类没有区别,一个类名,后跟一个或多个需 ...
- C语言-getopt函数
#include<unistd.h> int getopt(int argc,char *const argv[],const char *optstring); extern char ...