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
随机推荐
- oracle 查询表名以及表的列名
oracle 查询表名以及表的列名的代码. 1.查询表名: 代码如下: select table_name,tablespace_name,temporary from user_tables [ ...
- HDU-1016-素数环
/* 将1-n个数放在环中,保证相邻的两个数的和是素数 第一个数字永远是1 就这两个约束条件 第一个难点是计算素数: 参考文献: http://c.biancheng.net/cpp/html/254 ...
- Unity编辑器扩展Texture显示选择框
学习NGUI插件的时候,突然间有一个问题为什么它这些属性可以通过弹出窗口来选中呢? 而我自己写的组件只能使用手动拖放的方式=.=. Unity开发了组件Inspector视图扩展API,如果我们要写插 ...
- Unity 人物跟谁手指的移动(第一种方式)
长夜漫漫无心睡眠,敲敲代码,越敲越来劲! 我发现好多小朋友都在玩熊出没之xxxx这个游戏,居然打了一下午都没玩通第2关,我把测试也叫来陪我一起玩! 结果他也打不通,我再去叫策划,他也没打过,我去叫主管 ...
- 键盘code码速查表
键盘 Key Code对照表 字母和数字键的键码值(keyCode) 按键 键码 按键 键码 按键 键码 按键 键码 A 65 J 74 S 83 1 49 B 66 K 75 T 84 2 50 C ...
- Android系统Surface机制的SurfaceFlinger服务简要介绍和学习计划
文章转载至CSDN社区罗升阳的安卓之旅,原文地址:http://blog.csdn.net/luoshengyang/article/details/8010977 前面我们从Android应用程序与 ...
- Winform单例模式与传值
单例模式(singleton)的意思就是只有一个实例.单例模式确保某一个类只有一个实例,而且自行实例化并向整个系统提供这个实例.这个类称为单例类. 在多窗体界面中,如果要加入一个“关于”的窗体,用于显 ...
- ARCGIS接口详细说明
ArcGIS接口详细说明 目录 ArcGIS接口详细说明... 1 1. IField接口(esriGeoDatabase)... 2 2. IFieldEdit接口(esriGe ...
- jdbc select
import java.sql.Connection; import java.sql.DriverManager; import java.sql.PreparedStatement; import ...
- js Array 学习
摘抄自<JavaScript权威指南> 1.join()返回生成的字符串.数组元素转化为字符串,拼接.默认分隔符:“,”. 2.reverse()返回逆序的数组,替换.数组中的元素倒序. ...