js仿百度文库文档上传页面的分类选择器_第二版
仿百度文库文档上传页面的多级联动分类选择器第二版,支持在一个页面同时使用多个分类选择器;
此版本把HTML,CSS,以及图片都封装到“category.js”中,解决因文件路径找不到样式及图片的问题;
源码下载地址:http://download.csdn.net/detail/testcs_dn/7290577
初始状态,一个页面使用两个,可以初始化之前选中的分类:
选择状态:
当选中一个分类后,会触发“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,14var 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>
源码下载地址: http://download.csdn.net/detail/testcs_dn/7290577
js仿百度文库文档上传页面的分类选择器_第二版相关推荐
- SpringBoot实现百度文库文档上传,通俗易懂适合萌新
介绍 最近项目需要将word文档上传到百度文库,所以去百度智能云上看了下API,发现居然没有,而且百度文库的文章在网上居然没多少人发教程.所以这个文章是发下如何将word上传到百度文库上,因为我经常去 ...
- Java实现仿百度文库文档在线阅读
为了实现这个功能,我们需要用到如下软件,Java+FlexPaper+SwfTool+OpenOffice这四大件. 1.思路 我们将doc.ppt等文档格式通过openoffice转换成pdf的格式 ...
- 文秀才文档管理系统文档管理,CAD, 图纸管理, 百度文库, 文档在线预览
原文来自 http://www.fanganwang.com/Product-detail-item-1440.html,欢迎转载. 关键字:文档管理,CAD, 图纸管理, 百度文库, 文档在线预览 ...
- SpringBoot+Vue+OpenOffice实现文档管理(文档上传、下载、在线预览)
场景 SpringBoot集成OpenOffice实现doc文档转html: SpringBoot集成OpenOffice实现doc文档转html_BADAO_LIUMANG_QIZHI的博客-CSD ...
- 百度文库文档(文字和图片)
百度文库文档(文字和图片) 背景 思路 预览效果 代码 代码解析 改进方向 参考资料 免责申明 背景 我想很多人会有与我一样的经历,想复制百度文库的内容却发现要开会员,天下苦百度文库久矣,本是广大网友 ...
- wps如何把文档上传到云服务器,WPS上传技巧:WPS怎么上传文件到云文档
摘要 腾兴网为您分享:WPS上传技巧:WPS怎么上传文件到云文档,作业盒子,粤警民通,一直播,一起发等软件知识,以及悦考,手机虚拟机,党务管理信息系统,闪炫,数据提取工具,深度终端,爱酷学习网,首汽 ...
- Office文档上传后实时转换为PDF格式_图片文件上传后实时裁剪_实现在线预览Office文档
Office文档上传后实时转换为PDF格式_图片文件上传后实时裁剪 前置条件 安装LibreOffice 安装OpenOffice 安装Unoconv 安装ImageMagick.x86_64 安装G ...
- quill光标位置插入html,quill编辑器+word文档上传,插入指定位置
官方quill没有直接给出插入html的方式 类似,下面两个方法,是quill框架提供的,但是并没有提供可以在指定光标位置插入html quill.pasteHTML:这个方法已经废弃了,但目前还是可 ...
- iHRM 人力资源管理系统_第9章_文件上传与PDF报表入门_第二节_PDF报表入门
iHRM 人力资源管理系统_第9章_文件上传与PDF报表入门_第二节_PDF报表入门 文章目录 iHRM 人力资源管理系统_第9章_文件上传与PDF报表入门_第二节_PDF报表入门 PDF报表入门 3 ...
- vue - element <upload> 组件批量上传文档,可携带其他表单数据项一同与文件 “手动提交“ 服务器(类似百度文库系统批量上传前端界面与逻辑)超详细教程示例源码,提供界面与逻辑完整源码
效果图 本示例使用的是 element 组件库,其实什么组件库都行(逻辑是一样),只要你是 vue.js 项目就能使用本教程. 本文实现了 vue + element 使用 upload 组件批量上传 ...
最新文章
- CCNET+MSBuild+SVN实时构建的优化总结
- 生活总有烦心事? 可能是你数学不好
- JSP九大内置对象和四大作用域和Servlet的三大作用域对象
- ICCV2021 Oral | UNO:用于“新类发现”的统一目标函数,简化训练流程!已开源!...
- 计算机操作系统》第06章在线测试,《计算机操作系统》第01章在线测试
- canvas 两个圆相交重叠区域颜色填充_「译」Canvas中的环绕规则 -Winding rules in Canvas...
- python selenium基本用法
- 在远程桌面连接中使用命令行参数
- 命令行模式下导入导出MySQL数据库
- javascript 日期时间函数(经典+完善+实用)
- Swift 周报 第十期
- windows 下安装 sns 学习研究
- 2021-11-13 变电站综合自动化 二次系统安全
- C#调用PB生成dll详解
- 两个stanby的NameNode问题解决
- Camtasia Studio2023非常好用的电脑录屏软件
- Java程序员必备核心知识点整理,建议收藏!
- 2022.6.2 质数(素数)与合数
- 萧伯纳:劳动和运动(转)
- 区块链技术+二维码,打造爱码物联产品质量溯源软件