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 相关文章推荐
用js来定义浏览器中一个左右浮动元素相对于页面主体宽度的位置的函数
Jan 21 Javascript
一个仿糯米弹框效果demo
Jul 22 Javascript
使用Chrome调试JavaScript的断点设置和调试技巧
Dec 16 Javascript
vue.js+boostrap项目实践(案例详解)
Sep 21 Javascript
使用JS代码实现点击按钮下载文件
Nov 12 Javascript
bootstrap的工具提示实例代码
May 17 Javascript
vue中的router-view组件的使用教程
Oct 23 Javascript
JavaScript基于遍历操作实现对象深拷贝功能示例
Mar 05 Javascript
jQuery 实现扁平式小清新导航
Jul 07 jQuery
javascript实现支付宝滑块验证码效果
Jul 24 Javascript
javascript实现前端分页功能
Nov 26 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的cms
2010/12/19 PHP
php.ini 配置文件的深入解析
2013/06/17 PHP
PHP 实现的将图片转换为TXT
2015/10/21 PHP
PHP7数组的底层实现示例
2019/08/25 PHP
基于jquery用于查询操作的实现代码
2010/05/10 Javascript
js数据验证集合、js email验证、js url验证、js长度验证、js数字验证等简单封装
2010/05/15 Javascript
JQuery slideshow的一个小问题(如何发现及解决过程)
2013/02/06 Javascript
javascript自然分类法算法实现代码
2013/10/11 Javascript
浅析tr的隐藏和显示问题
2014/03/05 Javascript
js实现键盘上下左右键选择文字并显示在文本框的方法
2015/05/07 Javascript
JS实现简单的图书馆享元模式实例
2015/06/30 Javascript
JS显示日历和天气的方法
2016/03/01 Javascript
浅析Jquery操作select
2016/12/13 Javascript
jquery仿微信聊天界面
2017/05/06 jQuery
vue高德地图之玩转周边
2017/06/16 Javascript
微信小程序基于picker实现级联菜单
2019/02/15 Javascript
vue 实现Web端的定位功能 获取经纬度
2019/08/08 Javascript
微信小程序基于movable-view实现滑动删除效果
2020/01/08 Javascript
python中print()函数的“,”与java中System.out.print()函数中的“+”功能详解
2017/11/24 Python
python脚本作为Windows服务启动代码详解
2018/02/11 Python
Django项目中用JS实现加载子页面并传值的方法
2018/05/28 Python
Python3调用百度AI识别图片中的文字功能示例【测试可用】
2019/03/13 Python
PYQT5设置textEdit自动滚屏的方法
2019/06/14 Python
python实现kNN算法识别手写体数字的示例代码
2019/08/16 Python
利用python实现AR教程
2019/11/20 Python
Python正则表达式学习小例子
2020/03/03 Python
Nº21官方在线商店:numeroventuno.com
2019/09/26 全球购物
大学生找工作推荐信范文
2013/11/28 职场文书
有关爱国演讲稿
2014/05/07 职场文书
市场开发计划书
2014/05/07 职场文书
办公室班子四风问题对照检查材料
2014/10/04 职场文书
有限责任公司股东合作协议书
2014/12/02 职场文书
小学班级标语口号大全
2015/12/26 职场文书
Mysql binlog日志文件过大的解决
2021/10/05 MySQL
nginx rewrite功能使用场景分析
2022/05/30 Servers
mysql数据库实现设置字段长度
2022/06/10 MySQL