jQuery前台数据获取实现代码


Posted in Javascript onMarch 16, 2011

jProviderData

/// <reference path="jUtil.js" /> $j = jQuery.noConflict(); 
(function ($j) { 
$j.providerData={ 
defaultSettings: { 
select_Span_Items: false, 
select_TD_Items: false, 
select_LI_Items: false 
}, 
init:function(options){ 
opts = $j.extend({}, $j.providerData.defaultSettings, options); 
singleItemJsonFormat='"{0}":"{1}"'; 
divItemFormat='{{0}}'; 
tableItemFormat='{0}'; 
}, 
getDataName:function(item){ 
var dataName = item.attr("dataname"); 
if(typeof dataName === 'undefined'||dataName==""){ 
dataName = item.attr("Id"); 
} 
if(typeof dataName === 'undefined'||dataName==""){ 
dataName=item.text(); 
} 
if(typeof dataName === 'undefined'||dataName==""){ 
dataName=item[0].innerText; 
} 
return dataName; 
}, 
getData:function(selector){ 
//var selector=opts.selector; 
var items; 
if(typeof selector!=="object"){ 
items=$j(selector); 
} 
else{ 
items=selector; 
} 
var retJsonValue=""; 
var subSelector=":input"; 
if (opts.select_Span_Items) { 
subSelector = subSelector + ",span"; 
} 
if (opts.select_LI_Items) { 
subSelector = subSelector + ",li"; 
} 
if(opts.select_TD_Items){ 
subSelector = subSelector + ",td"; 
} 
$j.each(items,function(i,item){ 
var t=$j(this); 
var dataName=$j.providerData.getDataName(t); 
//return:'{"dataname":"value"}' 
if($j.util.isInput(t)){ 
var value=t.val(); 
var itemStr= String.format(singleItemJsonFormat,dataName,value); 
retJsonValue=retJsonValue+itemStr+","; 
retJsonValue=retJsonValue.trimEnd(","); 
} 
//return:'{"dataname1":"value1","dataname2":"value2"}' 
else if($j.util.isDiv(t)){ 
var subItems = t.find(subSelector); 
var subStr = ""; 
$j.each(subItems, function (i, subItem) { 
//递归调用 处理子元素 
var tempSubItemStr = $j.providerData.getData("#"+$j(this).attr("id")); 
subStr = subStr + "," + tempSubItemStr; 
}) 
subStr=subStr.trimStart(","); 
retJsonValue=String.format(divItemFormat,subStr); 
} 
//return:'[{"dataname1":"value1","dataname2":"value2"},{"dataname1":"value3","dataname2":"value4"}]' 
else if($j.util.isTable(t)){ 
var trItems=t.find("TR:gt(0)"); 
//迭代处理Table中的每一行 
$j.each(trItems,function(i,trItem){ 
//处理行,找出行中的要收集数据的元素 
var subItems =$j(this).find(subSelector); 
var subStr = ""; 
//迭代处理行中所有需要收集数据的元素 
$j.each(subItems,function(i,subItem){ 
if($j.util.isInput($j(this))){ 
var tempSubItemStr = $j.providerData.getData("#"+$j(this).attr("id")); 
subStr = subStr + "," + tempSubItemStr; 
} 
else{ 
//如果是TD元素,且他里面不包含INPUT元素 
if( $j.util.isTD($j(this)) && ($j(this).find(":input").length==0)){ 
var tempSubItemStr = $j.providerData.getData($j(this)); 
subStr = subStr + "," + tempSubItemStr; 
} 
} 
}); 
subStr=subStr.trimStart(","); 
retJsonValue= retJsonValue+String.format(divItemFormat,subStr)+","; 
}); 
retJsonValue=retJsonValue.trimEnd(","); 
retJsonValue="["+retJsonValue+"]"; 
} 
//return:'{"dataname":"value"}' 
else if($j.util.isLi(t)){ 
var value=t.text(); 
var itemStr= String.format(singleItemJsonFormat,dataName,value); 
retJsonValue=retJsonValue+itemStr+","; 
retJsonValue=retJsonValue.trimEnd(","); 
} 
//return:'{"dataname":"value"}' 
else if($j.util.isTD(t)){ 
var value=t.text(); 
// var rowIndex = t.parent().prevAll().length; 
//获取当前列的列索引 
var colIndex = t.prevAll().length; 
//dataName由列的的列头中dataName属性决定,如果找不到由列头的内容决定 
var thItem=t.parent().parent().parent().find("th:eq("+colIndex+")"); 
if(thItem.length==1){ 
dataName=$j.providerData.getDataName(thItem); 
} 
var itemStr= String.format(singleItemJsonFormat,dataName,value); 
retJsonValue=retJsonValue+itemStr+","; 
retJsonValue=retJsonValue.trimEnd(","); 
} 
}); 
return retJsonValue; 
} 
}; 
jProviderData=function(options){ 
$j.providerData.init(options); 
return $j.providerData.getData(options.selector); 
}; 
})(jQuery);

String.prototype.trimStart = function(trimStr){ 
if(!trimStr){return this;} 
var temp = this; 
while(true){ 
if(temp.substr(0,trimStr.length)!=trimStr){ 
break; 
} 
temp = temp.substr(trimStr.length); 
} 
return temp; 
}; 
String.prototype.trimEnd = function(trimStr){ 
if(!trimStr){return this;} 
var temp = this; 
while(true){ 
if(temp.substr(temp.length-trimStr.length,trimStr.length)!=trimStr){ 
break; 
} 
temp = temp.substr(0,temp.length-trimStr.length); 
} 
return temp; 
}; 
String.prototype.trim = function(trimStr){ 
var temp = trimStr; 
if(!trimStr){temp=" ";} 
return this.trimStart(temp).trimEnd(temp); 
}; 
String.format = function () { 
if (arguments.length == 0) { 
return null; 
} 
var str = arguments[0]; 
for (var i = 1; i < arguments.length; i++) { 
var re = new RegExp('\\{' + (i - 1) + '\\}', 'gm'); 
str = str.replace(re, arguments[i]); 
} 
return str; 
} 
(function ($j) { 
$j.util = { 
_compareTagName : function (item, tagName) { 
return item.attr("tagName").toUpperCase() == tagName.toUpperCase(); 
}, isTable: function (item) { 
return $j.util._compareTagName(item, "TABLE"); 
}, 
isDiv: function (item) { 
return $j.util._compareTagName(item, "DIV"); 
}, 
isInput: function (item) { 
return $j.util._compareTagName(item, "INPUT"); 
}, 
isSpan: function (item) { 
return $j.util._compareTagName(item, "SPAN"); 
}, 
isLi: function (item) { 
return $j.util._compareTagName(item, "LI"); 
}, 
isTD: function (item) { 
return $j.util._compareTagName(item, "TD"); 
} 
}; 
})(jQuery);
Javascript 相关文章推荐
让图片旋转任意角度及JQuery插件使用介绍
Mar 20 Javascript
js获取class的所有元素
Mar 28 Javascript
js实现的折叠导航示例
Nov 29 Javascript
jquery禁止输入数字以外的字符的示例(纯数字验证码)
Apr 10 Javascript
js语法学习之判断一个对象是否为数组
May 13 Javascript
JQuery实现防止退格键返回的方法
Feb 12 Javascript
JS修改iframe页面背景颜色的方法
Apr 01 Javascript
BootStrap 轮播插件(carousel)支持左右手势滑动的方法(三种)
Jul 07 Javascript
Vue.js实现简单动态数据处理
Feb 13 Javascript
React-redux实现小案例(todolist)的过程
Sep 29 Javascript
VUE和Antv G6实现在线拓扑图编辑操作
Oct 28 Javascript
JavaScript 实现页面滚动动画
Apr 24 Javascript
最短的IE判断代码
Mar 13 #Javascript
javascript模拟的Ping效果代码 (Web Ping)
Mar 13 #Javascript
js中巧用cssText属性批量操作样式
Mar 13 #Javascript
js中获取事件对象的方法小结
Mar 13 #Javascript
js中关于new Object时传参的一些细节分析
Mar 13 #Javascript
重载toString实现JS HashMap分析
Mar 13 #Javascript
JavaScript获取页面上某个元素的代码
Mar 13 #Javascript
You might like
用PHP连接Oracle for NT 远程数据库
2006/10/09 PHP
PHP入门学习笔记之一
2010/10/12 PHP
PHP在不同页面间传递Json数据示例代码
2013/06/08 PHP
PHP将身份证正反面两张照片合成一张图片的代码
2017/04/08 PHP
PHP添加PNG图片背景透明水印操作类定义与用法示例
2019/03/12 PHP
php解决安全问题的方法实例
2019/09/19 PHP
laravel高级的Join语法详解以及使用Join多个条件
2019/10/16 PHP
JQERY limittext 插件0.2版(长内容限制显示)
2010/08/27 Javascript
Jquery中Ajax 缓存带来的影响的解决方法
2011/05/19 Javascript
当jQuery遭遇CoffeeScript的时候 使用分享
2011/09/17 Javascript
MultiSelect左右选择控件的设计与实现介绍
2013/06/08 Javascript
jquery如何通过name名称获取当前name的value值
2013/12/20 Javascript
jquery动态分页效果堪比时光网
2014/09/25 Javascript
JavaScript时间操作之年月日星期级联操作
2016/01/15 Javascript
12个非常有用的JavaScript技巧
2017/05/17 Javascript
vuejs实现本地数据的筛选分页功能思路详解
2017/11/15 Javascript
JS实现的简单拖拽购物车功能示例【附源码下载】
2018/01/03 Javascript
vue内置组件transition简单原理图文详解(小结)
2018/07/12 Javascript
详解如何写出一个利于扩展的vue路由配置
2019/05/16 Javascript
layui的表单提交以及验证和修改弹框的实例
2019/09/09 Javascript
微信小程序实现简单文字跑马灯
2020/05/26 Javascript
[01:18:31]DOTA2-DPC中国联赛定级赛 LBZS vs Magma BO3第一场 1月10日
2021/03/11 DOTA
python字符类型的一些方法小结
2016/05/16 Python
python实现批量注册网站用户的示例
2019/02/22 Python
Python面向对象特殊属性及方法解析
2020/09/16 Python
CSS3教程(5):网页背景图片
2009/04/02 HTML / CSS
美国最大的团购网站:Groupon
2016/07/23 全球购物
太阳镜仓库,售价20美元或更少:Sunglass Warehouse
2016/09/28 全球购物
美国最大的农村生活方式零售店:Tractor Supply Company(TSC)
2017/05/15 全球购物
巴西最大的在线约会网站:ParPerfeito
2018/07/11 全球购物
英国床垫和床架购物网站:Bedman
2019/11/04 全球购物
应届生个人求职信模板
2013/11/26 职场文书
课例研修方案
2014/05/31 职场文书
感谢信格式范文
2015/01/22 职场文书
详解解Django 多对多表关系的三种创建方式
2021/08/23 Python
MySQL新手入门进阶语句汇总
2022/09/23 MySQL