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
随机推荐
- Eclipse 快捷键总结
导包:alt+/ctrl+shift+o (alt+/) 全局文件搜索:ctrl+shift+r 全局关键词搜索:ctrl+h 查看解决方案:ctrl+1 自动补全:abcdefghjklmnopqr ...
- Trie树|字典树(字符串排序)
有时,我们会碰到对字符串的排序,若采用一些经典的排序算法,则时间复杂度一般为O(n*lgn),但若采用Trie树,则时间复杂度仅为O(n). Trie树又名字典树,从字面意思即可理解,这种树的结构像英 ...
- C/C++中经常使用的字符串处理函数和内存字符串函数
一. 字符处理函数 1. 字符处理函数:<ctype.h> int isdigit(int ch) ;//是否为数字,即ch是否是0-9中的字符 int ...
- Android - 使用Intent来启动Activity
本文地址: http://blog.csdn.net/caroline_wendy/article/details/21455141 Intent 的用途是 绑定 应用程序组件, 并在应用程序之间进行 ...
- onvif规范的实现：使用gSOAP创建SOAP调用实例
预备知识 ONVIF规范中设备管理和控制部分所定义的接口均以Web Services的形式提供.ONVIF规范涵盖了完全的XML及WSDL的定义.每一个支持ONVIF规范的终端设备均须提供与功能相应的 ...
- 在任务计划程序用Bat命令执行exe程序
@echo off :open choice /c:123 /m "1:创建,2:终止,3:删除" if errorlevel 3 goto delete if errorleve ...
- Android studio教程：[5]活动的生命周期
想要学好安卓开发,就必须理解安卓软件的生命周期,明白一个活动的创建.启动.停止.暂停.重启和销毁的过程,知道各个阶段会调用什么函数进行处理不同的情况,这里我就通过一个简单的例子让大家明白一个活动的生命 ...
- IRP 与 派遣函数
什么是派遣函数: 派遣函数是 WIndows 驱动程序中的重要概念.驱动程序的主要功能是负责处理I/O请求,其中大部分I/O请求是在派遣函数中处理的.也就是说,派遣函数是用来处理驱动程序提交过来的 I ...
- view import symbols
nm -D [file]|grep -w U or objdump -T [file]|grep "*UND*"
- final的深入理解 - final数据
先通过例子看一看: package com.sotaof.testfinal; public class Value { int i; public Value(int i){ this.i = i; ...