easyui表格扩展插件的开发与编写
1.jQuery.extend(object);为扩展jQuery类本身.为类添加新的方法。 2.jQuery.fn.extend(object);给jQuery对象添加方法。
jQuery便是一个封装得非常好的'类'，比如我们用 语句$("#div1")会生成一个 jQuery类的实例。
jQuery.extend(object);
为jQuery类添加类方法，可以理解为添加静态方法。
jQuery.extend({
min: function(a, b) {
return a < b ? a : b;
},
max: function(a, b) {
return a > b ? a : b;
}
});
jQuery.min(2, 3); // 2
jQuery.max(4, 5); // 5jQuery.fn.extend(object);
就是为jQuery类添加“成员函数”。jQuery类的实例才可以调用这个“成员函数”。
比如我们要开发一个插件，做一个特殊的编辑框，当它被点击时，便alert 当前编辑框里的内容。可以这么做：
$.fn.extend({
alertWhileClick: function() {
$(this).click(function() {
alert($(this).val());
});
}
});
//$("#input1")是jQuery的实例，调用这个扩展方法
$("#input1").alertWhileClick();jQuery.extend() 的调用并不会把方法扩展到对象的实例上，引用它的方法也需要通过jQuery类来实现，如jQuery.init()
jQuery.fn.extend()的调用把方法扩展到了对象的prototype上，所以实例化一个jQuery对象的时候，它就具有了这些方法，在jQuery.JS中到处体现这一点
jQuery.fn = jQuery.prototype
你可以拓展一个对象到jQuery的 prototype里去，这样的话就是插件机制了。
(function($) {
$.fn.tooltip = function(options) {};
//等价于 var
tooltip = {
function(options) {}
};
$.fn.extend(tooltip) = $.prototype.extend(tooltip) = $.fn.tooltip
})(jQuery);easyui的扩展插件
DataGrid扩展自$.fn.panel.defaults。使用$.fn.datagrid.defaults重写默认值对象。
方法
插件
/**
* 扩展带工具栏的datagrid ，工具栏中的按钮样式 用 add, del,save,cancel
*/
(function ($) {
function init(target) {
var t = $(target),
state = $.data(target, 'gridsub'),
key = state.options.key;
var editIndex = undefined;
function endEditing() {
if (editIndex == undefined) { return true }
if (t.datagrid('validateRow', editIndex)) {
var ed = t.datagrid('getEditor', { index: editIndex, field: key });
t.datagrid('endEdit', editIndex);
editIndex = undefined;
return true;
} else {
return false;
}
}
t.datagrid({
title: state.options.title,
width: state.options.width,
onClickRow: function (index) {
if (endEditing()) {
t.datagrid('selectRow', index)
.datagrid('beginEdit', index);
editIndex = index;
} else {
t.datagrid('selectRow', editIndex);
}
},
rownumbers: state.options.rownumbers,
singleSelect: state.options.singleSelect,
toolbar: state.options.toolbar,
pagination: state.options.pagination,
columns: state.options.columns,
data: state.options.data,
});
$(state.options.toolbar).find("a.add").on("click", function (e) {
if (endEditing()) {
t.datagrid('appendRow', {});
editIndex = t.datagrid('getRows').length - 1;
t.datagrid('selectRow', editIndex).datagrid('beginEdit', editIndex);
}
});
$(state.options.toolbar).find("a.save").on("click", function (e) {
if (t.datagrid('validateRow', editIndex)) {
var ed = t.datagrid('getEditor', { index: editIndex, field: key });
t.datagrid('endEdit', editIndex);
t.datagrid('acceptChanges');
var rows = t.datagrid('getSelected');
t.datagrid("updateRow", rows);
}
});
$(state.options.toolbar).find("a.del").on("click", function (e) {
var rows = t.datagrid('getSelected');
var editIndex = t.datagrid("getRowIndex", rows);
if (!rows) {
$Core.UI.message.warning("请选择一条数据"); return false;
}
t.datagrid('cancelEdit', editIndex).datagrid('deleteRow', editIndex);
editIndex = undefined;
});
$(state.options.toolbar).find("a.cancel").on("click", function (e) {
var row = t.datagrid('getSelected');
t.datagrid('endEdit', editIndex)
// if (!state.options.key) {
// t.datagrid('deleteRow', editIndex);
// }
editIndex = undefined;
});
}
// 插件的定义
$.fn.gridsub = function (options, param) {
if (typeof options == 'string') {
var method = $.fn.gridsub.methods[options];
if (method) {
return method(this, param);
}
}
return this.each(function () {
var state = $.data(this, "gridsub");
if (state) {
$.extend(state.options, options);
} else {
$.data(this, "gridsub",
{
options: $.extend(true, {}, $.fn.gridsub.defaults, options)
});
}
init(this);
});
};
$.fn.gridsub.methods = {
getRows: function (jq) {
return $(jq[0]).datagrid("getRows");
},
load: function (jq, value) {
return $(jq[0]).datagrid({ data: value });
}
};
// 插件的defaults
$.fn.gridsub.defaults = {
title: '',
width: 300,
//onClickRow: state.onClickRow,
rownumbers: false,
singleSelect: false,
// toolbar: state.toolbar,
pagination: false,
columns: [],
data: [],
};
// 闭包结束
})(jQuery);插件使用
添加
删除
保存
取消
$("#dglist2").gridsub({
title: '物资',
width: 700,
key: "id",
rownumbers: false,
singleSelect: true,
toolbar: ".btn_tool2",
pagination: false,
columns: [[
{ field: 'materialStoreId', checkbox: true, hidden: true },
{
field: 'materialName', title: '物资名称 ', width: '25%', align: 'center', sortable: false
},
{
field: 'materialType', title: '物资类型', width: '25%', align: 'center', formatter: function (value, row, index) {return $Core.DicCache.get('material_type')[value]; }
},
{ field: 'materialInNum', title: '物资数量', width: '25%', align: 'center', sortable: false, editor: { type: 'numberbox', options: { required: false, validType: 'numeric' } } },
{
field: 'materialModel', title: '规格型号', width: '25%', align: 'center', sortable: false
},
{
field: 'materialProductionDate', title: '生产日期', width: '25%', align: 'center', sortable: false
},
{
field: 'materialManufacturer', title: '生产厂家', width: '25%', align: 'center', sortable: false
},
{
field: 'materialCycle', title: '使用周期', width: '25%', align: 'center', sortable: false
},
]],
// data: [],
});
var rows2 = $("#dglist2").gridsub("getRows");扩展插件
(function ($) { /*** 统一设置datagrid 的一些默认参数*/
$.extend($.fn.datagrid.defaults,
{
rownumbers: true,
fit: true,
pagination: true,
striped: true,
method: "post",
pageSize: 20,
pageList: [20, 50, 100]
});
$.extend($.fn.combobox.defaults,
{
editable: false,
panelHeight: 'auto',
valueField: 'id',
textField: 'text',
labelPosition: 'left',
method: "get",
loadFilter: function (data) {
if ($.util.isArray(data.data))
return data.data;
return data;
},
onShowPanel: function () {
arrowrotate($(this), true);
},
onHidePanel: function () {
arrowrotate($(this), false);
}
});
})(jQuery);
扩展自$.fn.combo.defaults。使用$.fn.combobox.defaults重写默认值对象。
$("#customerType").combobox({
url: _self.dicurl+'customerType',
label: '用户类型'
});扩展自$.fn.combo.defaults。使用$.fn.datebox.defaults重写默认值对象。
var buttons = $.extend([], $.fn.datebox.defaults.buttons);
buttons.splice(1,
1,
{
text: '清空',
handler: function (target) {
$(target).combo("setValue", "").combo("setText", ""); // 设置空值
$(target).combo("hidePanel"); // 点击清空按钮之后关闭日期选择面板
}
});
$.fn.datebox.defaults.buttons = buttons;
