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
随机推荐
- hdu 3681 Prison Break(状态压缩+bfs)
Problem Description Rompire . Now it’s time to escape, but Micheal# needs an optimal plan and he con ...
- svn local delete, incoming delete upon update 解决办法
经常有人会说,树冲突是很难解决的一类冲突,其实一旦了解了其原理,要解决也不难.先回顾下对于树冲突的定义. 树冲突:当一名开发人员移动.重命名.删除一个文件或文件夹,而另一名开发人员也对它们进行 ...
- 创建httpd启动脚本并加入启动列表开机启动
第一步: cp /usr/local/apache2/bin/apachectl /etc/init.d/httpd 第二步: vim /etc/init.d/httpd 在第一行#!/bin/s ...
- jQuery中两种阻止事件冒泡的区别
方式一:event.stopPropagation(); 方式二:return false; 但是这两种方式是有区别的.return false 不仅阻止了事件往上冒泡,而且阻止了事件本身.event ...
- O the joy of having nothing / 아무것도 갖지않고
Chords: C G Am Em F C Dm G C G Am Em F C Am Dm G English - O the joy of having nothing and being not ...
- ASP.NET MVC 自定义错误页面心得
自定义错误页面的目的,就是为了能让程序在出现错误/异常的时候,能够有较好的显示体验. 所以,首先要先了解,我们可以在哪里捕获异常. 当程序发生错误的时候,我们可以在两个地方捕获: Global里面的A ...
- XMAL 中x名称控件的Auttribute
1 X:Class 作用告诉XAML编译器将XAML标签的编译结果与后台代码中指定的类合并,只能用于根节点,并且与之同名的类需要有Partial 例如窗口 2 X:ClassModifier 作用告诉 ...
- jeasyui制作计划-搭建php运行环境
1.参考链接: http://jingyan.baidu.com/article/154b46315242b328ca8f4101.html http://jingyan.baidu.com/arti ...
- mysql三张表关联查询
三张表,需要得到的数据是标红色部分的.sql如下: select a.uid,a.uname,a.upsw,a.urealname,a.utel,a.uremark, b.rid,b.rname,b. ...
- 《javascript权威指南》阅读笔记 1
3.1-3.5 3.1 数字 3.1首先声明了在JS中的数字是不区分整数值和浮点数值的.其次给出了js浮点类型表示的范围:最大值是±1.7976931348623157×10^308,最小值±5×10 ...