因为公司用到了自己定义的列表展示，于是看了看实现的方法，发现，是在jquery上，进行了插件开发。
下面的代码是在使用插件，渲染集合列表。
$('#table_report').dataTable({
"bFilter" : false, // 开关，是否启用客户端过滤器
"bProcessing" : true, // 当datatable获取数据时候是否显示正在处理提示信息。
"bAutoWidth" : false, // 自适应宽度
"sPaginationType" : "full_numbers", // 分页样式
"bServerSide" : true, // 从服务器端取数据
"sAjaxSource" : $('#ctx').val() + "/pages/product/form/managers?flag="+$('#flag').val(), // mvc后台ajax调用接口。
"fnServerParams" : function(aoData) {
aoData.push({"name" : "code","value" : $("#query_module_code").val()});
},
"fnServerData" : Editorial.Product.ProductInfo.retrieveData,
"fnDrawCallback" : function(oSettings) {
for ( var i = 0, iLen = oSettings.aiDisplay.length; i < iLen; i++) {
$('td:eq(0)', oSettings.aoData[oSettings.aiDisplay[i]].nTr).html(i + oSettings._iDisplayStart + 1);
}
},
"aoColumns" : [ {
"sTitle" : "序号",
"mDataProp" : "id",
"bSortable": false
}, {
"sTitle" : "操作",
"mData" : null,
"bSortable": false,
"aTargets" : [ -1 ],
// 自定义列的样式
"fnRender" : function(oObj) {
var start = '<div class="hidden-phone visible-desktop btn-group">';
var edit = '<button class="btn btn-mini btn-warning" title="修改" onclick="Editorial.Product.ProductInfo.editObj(\'' + oObj.aData.id + '\', \'' + oObj.aData.productType.code + '\')"><i class="icon-edit bigger-120"></i></button>';
var save = '<button class="btn btn-mini btn-warning" title="查看" onclick="Editorial.Product.ProductInfo.editObj(\'' + oObj.aData.id + '\', \'' + oObj.aData.productType.code + '\')"><i class="icon-edit bigger-120"></i></button>';
var ruku = '<button class="btn btn-mini btn-warning" title="入库管理" onclick="Editorial.Product.ProductInfo.ruku(\'' + oObj.aData.id + '\')"><i class="icon-edit bigger-120"></i></button>';
var chuku = '<button class="btn btn-mini btn-warning" title="出库管理" onclick="Editorial.Product.ProductInfo.chuku(\'' + oObj.aData.id + '\')"><i class="icon-edit bigger-120"></i></button>';
var edit2 = '<button class="btn btn-mini " title="变更" onclick="Editorial.Product.ProductInfo.editObj2(\'' + oObj.aData.id + '\', \'' + oObj.aData.productType.code + '\', \''+'change'+'\')"><i class="icon-off bigger-120"></i></button>';
var end = '</div>';
if($('#flag').val().trim() == 'app'){
return start +save +edit + end;
} else {
return start+save+ruku+chuku+edit2/*+edit4+edit5+edit6+edit7+edit8+edit9+edit1+edit10+edit11+edit13+edit14+edit15+edit16+edit17+edit18+edit19+edit20+edit21*/+ end;
}
}
} ],
// 多语言配置
"oLanguage" : {
"sProcessing" : "正在加载中......",
"sLengthMenu" : "每页显示 _MENU_ 条记录",
"sZeroRecords" : "对不起，查询不到相关数据！",
"sEmptyTable" : "表中无数据存在！",
"sInfo" : "当前显示 _START_ 到 _END_ 条，共 _TOTAL_ 条记录",
"sInfoFiltered" : "数据表中共为 _MAX_ 条记录",
"sSearch" : "搜索",
"oPaginate" : {
"sFirst" : "首页",
"sPrevious" : "上一页",
"sNext" : "下一页",
"sLast" : "末页"
}
}
});
下面的代码是在一个JS文件中，开发的JQuery插件。
×
×
×
×
×
×
先贴全部代码，然后再解释。
(function($) {
var IngentaGrid = function(self, setting) {
var interial = {
newGrid : null,
aoColumns : [],
originalElement : self.get(0)
};
this.fnGetData = function(refer) {
var rowsData = interial.newGrid.datagrid("getRows");
if (refer === undefined) {
return rowsData;
} else {
if (!Number.isNumber(refer)) {
refer = this.fnGetPosition(refer);
}
if (refer > -1) {
return rowsData[refer];
} else {
return null;
}
}
};
this.fnAddData = function(rowData) {
var _data = [];
if ($.isArray(rowData)) {
_data = rowData;
} else {
_data.push(rowData);
}
for ( var i in _data) {
interial.newGrid.datagrid("appendRow", _data[i]);
}
};
this.fnUpdate = function(rowData, index) {
interial.newGrid.datagrid("updateRow", {
index : index,
row : rowData
});
};
this.fnDeleteRow = function(refer) {
var pos = this.fnGetPosition(refer);
if (pos > -1) {
interial.newGrid.datagrid("deleteRow", pos);
}
};
this.fnInsertRow = function(index, rowData) {
interial.newGrid.datagrid("insertRow", {
index : index,
row : rowData
});
};
this.fnSetColumnVis = function(searcher, isShow) {
searcher = this.getField(searcher).field;
if (isShow === true) {
interial.newGrid.datagrid("showColumn", searcher);
} else if (isShow === false) {
interial.newGrid.datagrid("hideColumn", searcher);
}
};
this.fnSettings = function() {
return {
aoColumns : interial.aoColumns
};
};
this.getField = function(searcher) {
if (Number.isNumber(searcher)) {
searcher = interial.aoColumns[searcher].field;
}
return interial.newGrid.datagrid("getColumnOption", searcher);
};
this.fnClearTable = function() {
interial.newGrid.datagrid("loadData", {
total : 0,
rows : []
});
};
this.fnGetPosition = function(refer) {
var tr = $(refer).closest("tr");
if (tr.size() > 0) {
return tr.get(0).rowIndex;
} else {
return -1;
}
};
this.load = function() {
interial.newGrid.datagrid("load", interial.getQueryParams());
};
this.reload = function() {
interial.newGrid.datagrid("reload", interial.getQueryParams());
};
this.getChecked = function() {
var checkedRows = interial.newGrid.datagrid("getChecked");
return checkedRows;
};
this.fnGetNodes = function(refer) {
var originalDataGrid = $.data(interial.originalElement, "datagrid");
var elRows = [];
originalDataGrid.dc.body2.find("tr").each(function(i, o) {
elRows.push(o);
});
if (refer != null) {
if (!Number.isNumber(refer)) {
refer = this.fnGetPosition(refer);
}
if (refer > -1) {
return elRows[refer];
}
}
return elRows;
};
this.fnGetFooterNodes = function() {
var originalDataGrid = $.data(interial.originalElement, "datagrid");
var elRows = [];
originalDataGrid.dc.footer2.find("tr").each(function(i, o) {
elRows.push(o);
});
return elRows;
};
**********************************分割点××××××××××××××××××××××
interial.getQueryParams = function() {
var queryParams = {};
if ($.isFunction(setting.fnServerParams)) {
var paramsContainer = [];
setting.fnServerParams.call(setting.fnServerParams, paramsContainer);
for (var i in paramsContainer) {
if (paramsContainer[i].value != null) {
JSONDDL.set(queryParams, paramsContainer[i].name, paramsContainer[i].value, true);
}
}
}
return queryParams;
};
var _id = self.attr("id");
var columns = [], _ths = self.find("thead th"), _columns = setting.aoColumns;
if (_ths.length != _columns.length) {
alert("表格列数不匹配。"+_ths.length+","+_columns.length);
return;
}
for (var i = 0; i < _columns.length; i++) {
var _dataProp = _columns[i].mDataProp;
var _title = _columns[i].sTitle;
var _fnRender = _columns[i].fnRender;
var _checkbox = _columns[i].checkbox;
var _bSortable = _columns[i].bSortable;
var _bVisible = _columns[i].bVisible;
if (_bVisible == null) {
_bVisible = true;
_columns[i].bVisible = _bVisible;
}
if (_title != null) {
if (_title.toLowerCase().indexOf("checkbox") > -1) {
setting.singleSelect = false;
}
}
if (_dataProp == null) {
_dataProp = "TempColumn" + i;
_columns[i].mDataProp = _dataProp;
}
if (_fnRender != null) {
}
if (_bSortable !== true) {
_bSortable = false;
_columns[i].bSortable = _bSortable;
}
interial.aoColumns.push({
hidden : !_bVisible,
checkbox : _checkbox,
field : _dataProp,
title : _title,
width : _ths[i].width,
align: _columns[i].align != null ? _columns[i].align : null,
halign: _columns[i].halign != null ? _columns[i].halign : "center",
fnRender : _fnRender,
formatter : function(value, row, index) {
if (this.title == null) {
this.title = "";
}
var _rowNo = 0;
if (this.title == "序号" || (this.title.toLowerCase() == "id")) {
var _options = interial.newGrid.datagrid("options");
_rowNo = (_options.pageNumber - 1) * _options.pageSize + index + 1;
}
value = JSONDDL.get(row, this.field, true);
if ($.isFunction(this.fnRender)) {
return this.fnRender.call(this, {
aData : row,
iDataRow : index,
rowNo : _rowNo
});
} else {
if (this.title == "序号" || (this.title.toLowerCase() == "id")) {
return _rowNo;
} else {
return value;
}
}
},
sortable : _bSortable
});
}
self.css({
height : setting.height === undefined ? "310px" : setting.height,
maxHeight : setting.maxHeight === undefined ? "310px" : setting.maxHeight
});
interial.newGrid = $(self).datagrid({
//width : "100%",
remoteSort : false,
url : setting.sAjaxSource == null ? null : setting.sAjaxSource,
columns : [ interial.aoColumns ],
pagination : setting.bPaginate === false ? false : true,
pageSize : 10,
pageList : [10, 25, 50, 100],
singleSelect : setting.singleSelect == false ? false : true,
queryParams : interial.getQueryParams(),
onLoadSuccess : setting.onLoadSuccess,
onClickRow : setting.onClickRow,
showFooter: true,
rowStyler : setting.rowStyler
});
for (var i = 0; i < _columns.length; i++) {
var _dataProp = _columns[i].mDataProp;
var _td = $("tr.datagrid-header-row td[field="+ _dataProp.replace(/\./g, "\\.") +"]", self.parent());
var clickFn = JSONDDL.get(_columns[i], "events.click", true);
var dblclickFn = JSONDDL.get(_columns[i], "events.dblclick", true);
_td.off();
if ($.isFunction(clickFn) === true) {
_td.on("click", clickFn);
}
if ($.isFunction(dblclickFn) === true) {
_td.on("dblclick", dblclickFn);
}
}
};
$.fn.dataTable = function(_setting) {
return new IngentaGrid(this, _setting);
};
})(jQuery);
分割点上面部分，是，可以通过调用这个.dataTable，中的其他一些自定义方法，来对这个集合列表进行操作，比如，
删除某一行操作，fnDeleteRow
增加一行 的操作，fnInsertRow
分割点一下的，就是渲染集合列表的具体操作了。
*******************再次分割************************
去掉所有的业务逻辑代码，只剩下最简单的。
(function($) {
var IngentaGrid = function(self, setting) {
};
$.fn.dataTable = function(_setting) {
return new IngentaGrid(this, _setting);
};
})(jQuery);
这个，就是，自定义插件，最基本的代码了。
而，$.fn是指jquery的命名空间，加上fn上的方法及属性，会对jquery实例每一个有效。
如扩展$.fn.abc(),即$.fn.abc()是对jquery扩展了一个abc方法,那么后面你的每一个jquery实例都可以引用这个方法了.
那么你可以这样子：$("#div").abc();
jQuery为开发插件提拱了两个方法，分别是：
jQuery.extend(object);为扩展jQuery类本身.为类添加新的方法。
jQuery.fn.extend(object);给jQuery对象添加方法。
所以，就这么简单；
时间： 2024-11-03 00:59:12