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
随机推荐
- 9.5 在 C# 中使用 F# 库
9.5 在 C# 中使用 F# 库 像 C# 一样,F# 也是一种静态类型的语言,就是说,编译器知道每一个值的类型,以及类方法和属性的签名.对于与 C# 的互操作性来说.这是很重要的,由于,编译器能够 ...
- 修改vim中的tab为4个空格
记录一下,避免用时还得搜........ 1.临时修改 在vi中,set tabstop=4 或 set ts=4 2.永久修改 vi --version 查看要修改的文件 如果是vim的话,修改~/ ...
- C#基础学习心得（二）
索引器 class Program { static void Main(string[] args) { Employee e1 = new Employee(); e1[0] = "三& ...
- U盘变小恢复工具——亲测完美可用
大白菜U盘,装系统后,U盘损坏,格盘后8G只剩345M,用usbboot恢复到了2G容量.离8G还差很远.用U盘变小恢复工具后,完美恢复到原来大小.在此记录一下,以待下次遇到相似情况使用. 原文地址 ...
- CSS基础要点概况
1.CSS概述 1)css指层叠样式表 2)样式定义如何显示HTML元素 3)样式通常存储在样式表中 4)把样式添加到HTML4.0中,是为了解决内容与表现分离的问题 5)外部样式表可以极大提高工作效 ...
- IOS准备
1.Commond + shift + H 相当于Home键 2.更改项目的名称和icon图标 info.plist文件->bundle name -> 写上工程显示的名字 3.更改ico ...
- 获得创建临时表的session id
通过sql server的default trace和tempdb中的sys.objects视图,你能够获得创建临时表的session id,下面是相应的sql语句: DECLARE @FileNam ...
- Visual Studio宏注释模板
前言 有时写代码需要写注释的时候 甚是苦恼 写吧 怕麻烦 不写吧 似乎这代码估计自己都看不懂 权衡之下 似乎找一个自动写注释的方法最靠谱 一直在VS下开发 偶尔听人说过有一个宏工具可以帮助开发者快速注 ...
- VMware下设置CentOS虚拟机与主机同一网段
由于在开发中经常使用到自己的电脑搭建虚拟机器进行个人开发,而虚拟机器每次登录所使用的命令行界面比较小,看起来也不舒服.以下主要对centos虚拟机器下配置与主机共享同一网段IP,通过第三方软件(put ...
- Flask把变量注册到模板中
使用python的Flask框架时,参考<Flask Web开发>一书时,发现书中可以在全局使用Permission.FOLLOW变量. 但是自己在尝试是,确提示变量没有定义.经过搜索,找 ...