//将json数据绑定到具有模板的Table中
$.fn.dataBind = function (options) {
var target = this;
var defaults = {
expand: false,
loading: true,
showPager: true,
cache: true,
cacheName: undefined,
emptyMessage: '<div class="text_empty">没有数据内容。</div>',
data: undefined,
template: undefined,
url: undefined,
keyValue: '',
pageSize: 10,
currentPage: 1,
modelLine: 1,
modelType: undefined,
onDataBindSuccess: undefined,
onLoadSuccess: undefined,
onItemBind: undefined,
onError: undefined
};
var settings = settings || $.extend({}, defaults, options);
if (settings.cache == true) {
settings.cacheName = settings.cacheName || ('d_' + (settings.url || '') + settings.currentPage + settings.keyValue).replace('-', '_');
try {
settings.data = settings.data || ($.parseJSON($(target).data(settings.cacheName)));
}
catch (e) { }
}
if (!settings.modelType) {
if ($(target).is('ul')) {
settings.modelType = 'li';
}
else if ($(target).is('table')) {
settings.modelType = 'tbody>tr';
}
}
var template = settings.template || $(target).find(settings.modelType + ':lt(' + settings.modelLine + ')').hide().clone().show().outer();
var loadingFrame;
if (settings.loading) {
$('#loadingForm').popFrameClose();
loadingFrame = $('<div id="loadingForm" class="text_center img_v_middle" style="line-height:15px;"><img src="数据加载中...." alt=""/> </div>')
.appendTo(document.body).popFrame({ trigger: target, position: 'center', removeTargetOnClose: true, toolBox: false, height: 20, width: 30 });
}
if (settings.data) {
bindJson(settings);
if (loadingFrame) {
$(loadingFrame).popFrameClose();
}
}
else if (settings.url) {
$.ajax({
type: 'POST',
data: { KeyValue: (settings.keyValue + "," + settings.currentPage + "," + settings.pageSize) },
url: settings.url,
success: function (result) {
result = $(result).find("string").text();
var json;
try {
json = $.parseJSON(result);
}
catch (e) {
$.debug('返回的内容无法格式化成JSon', true);
if (settings.onError) {
settings.onError(e);
}
return;
}
if (settings.cache == true) {
$(target).data(('d_' + (settings.url || '') + settings.currentPage + settings.keyValue).replace('-', '_'), result);
}
settings.data = json;
bindJson(settings, result);
if (loadingFrame) { $(loadingFrame).popFrameClose(); }
},
error: function (errMessage) {
if (loadingFrame) { $(loadingFrame).popFrameClose(); }
if (settings.onError) {
settings.onError(errMessage);
}
else {
$('<div id="loadingForm" class="text_center img_v_middle text_important" style="line-height:15px;">意外错误<p>' + errMessage.responseText + '</p></div>').appendTo(document.body).popFrame({ trigger: target, position: 'center', removeTargetOnClose: true, toolBox: false, height: 20, width: 80, autoClose: 3000 });
}
}
});
}
else {
$(loadingFrame).popFrameClose();
}
function bindJson(settings, result) {
if (settings.onLoadSuccess) {
settings.onLoadSuccess(result, settings.data, settings);
}
if (settings.data) {
var templateHtml = template.replace(/[\r\n]/g, '');
var columns = new Array();
var regKey = new RegExp(/@-.*?-@/g);
while ((result = regKey.exec(templateHtml)) != null) {
columns.push(result[0]);
}
var pattern = '/(.*)' + columns.join('(.*)') + '(.*)/g';
var reg = new RegExp(eval(pattern));
//---------------------------------------------//
var stringbulder = '';
var table = settings.data.Table || settings.data;
$.each(table, function (i, item) {
if (settings.onItemBind) {
var bindResult = settings.onItemBind(item);
if (!bindResult) {
return true;
}
}
var replaceValue = '';
$.each(columns, function (j) {
var itemStr = eval('item.' + columns[j].substring(2, columns[j].length - 2)) || '';
if (columns.length >= 10) {
if (!isNaN(itemStr)) {
itemStr = ' ' + itemStr;
}
}
replaceValue += ('$' + new Number(j + 1) + itemStr);
});
replaceValue += ('$' + (columns.length + 1));
stringbulder += templateHtml.replace(reg, replaceValue);
});
if (settings.expand) {
$(target).find(settings.modelType + ':last').after(stringbulder);
}
else {
var length = $(target).find(settings.modelType).length;
if (length > 0) {
$(target).find(settings.modelType + ':gt(' + (settings.modelLine - 1) + ')').remove();
$(target).find(settings.modelType + ':last').after(stringbulder);
}
else {
$(target).append($(stringbulder));
}
}
//------------------------------------------------//
var footer = $(target).find('tfoot>tr>td');
if (settings.showPager && footer.length > 0 && settings.data.Pager && settings.data.Pager[0].PageCount > 1) {
var pagerString = '';
for (var i = 1; i <= settings.data.Pager[0].PageCount; i++) {
if (settings.currentPage == i) {
pagerString += ('[' + i.toString() + '] ');
}
else {
pagerString += ('[<a href="javascript:void(0)">' + i.toString() + '</a>] ');
}
}
$(target).find('tfoot>tr>td').html('<div class="text_center box_padding">' + pagerString + '</div>');
$(target).find('tfoot>tr>td>div>a').bind('click', function () {
settings.currentPage = parseInt($(this).text());
var pagerSetting = $.extend({}, defaults, settings);
pagerSetting.data = undefined;
$(target).dataBind(pagerSetting);
});
}
var dataCount = $(target).find(settings.modelType + '').length; //获得Tbody中存在数据的值
if (dataCount == settings.modelLine) {
$(target).find('tfoot>tr>td').html(settings.emptyMessage);
}
// else {
// $(target).find('tfoot>tr>td').html('');
// }
// $(template).hide();
if (settings.onDataBindSuccess) {
settings.onDataBindSuccess(result, settings.data, settings);
}
}
}
return target;
}
在这里必须table的模版必须使用如下格式：<table id="tbCompanyUserList" class="frame">
<thead>
<tr>
<th style="width: 0.5em;">
</th>
<th scope="col" style="width: 80px;">
姓名
</th>
<th scope="col" style="width: 160px;">
职位
</th>
<th>
公司名称
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
</td>
<td>
<a role="popUserInfo" class="logo_user_small" userid="@-UserId-@">@-RealName-@</a>
</td>
<td>
@-Title-@
</td>
<td>
@-CompanyName-@
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4" class="text_center">
</td>
</tr>
</tfoot>
</table>
不好意思忘了写用法了如下： $('#tbCompanyUserList).dataBind({
url: cfsns.url.company.newsList,
keyValue: companyId,
modelLine: 1,
emptyMessage: '<div class=\"text_unimportant text_center\">！</div>',
onLoadSuccess: function (jsonstr, json) {
});
}
}
},
onDataBindSuccess: function (result, json, setting) {
}
}
});
}
支持div和table的绑定，如果有错请联系我，我会尽快改正！