/// <reference path="knockout-2.2.1.js" />
|
/**
|
* 模块名：共通脚本
|
* 程序名: knockoutjs自定义绑定
|
* Copyright(c) haninfo
|
**/
|
|
(function ($, ko) {
|
var jqElement = function (element) {
|
var jq = $(element);
|
if ($(document).find(element).length == 0) { //处理元素在父页面执行的情况
|
if ($(parent.document).find(element).length > 0)
|
jq = parent.$(element);
|
}
|
return jq;
|
};
|
//value
|
ko.creatEasyuiValueBindings = function (o) {
|
o = $.extend({ type: '', event: '', getter: 'getValue', setter: 'setValue', fix: $.noop,formatter: function (v) { return v; }}, o);
|
|
var customBinding = {
|
init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
|
var jq = jqElement(element), handler = jq[o.type]('options')[o.event], opt = {};
|
|
//handle the field changing
|
opt[o.event] = function () {
|
handler.apply(element, arguments);
|
var value = jq[o.type](o.getter);
|
if (valueAccessor() == null) throw "viewModel中没有页面绑定的字段";
|
valueAccessor()(value);
|
};
|
|
//handle disposal (if KO removes by the template binding)
|
ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
|
jq[o.type]("destroy");
|
});
|
|
o.fix(element, valueAccessor);
|
jq[o.type](opt);
|
},
|
update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
|
value = ko.utils.unwrapObservable(valueAccessor());
|
jqElement(element)[o.type](o.setter, o.formatter(value));
|
}
|
};
|
ko.bindingHandlers[o.type + 'Value'] = customBinding;
|
};
|
|
ko.creatEasyuiValueBindings({ type: 'combobox', event: 'onSelect' });
|
ko.creatEasyuiValueBindings({ type: 'combotree', event: 'onChange' });
|
ko.creatEasyuiValueBindings({ type: 'datebox' , event: 'onSelect' , formatter: com.formatDate });
|
ko.creatEasyuiValueBindings({ type: 'lookup' , event: 'onChange' });
|
ko.creatEasyuiValueBindings({ type: 'numberbox' , event: 'onChange' });
|
ko.creatEasyuiValueBindings({ type: 'numberspinner' , event: 'onChange' ,fix: function (element) { $(element).width($(element).width() + 20); } });
|
|
//enable
|
ko.creatEasyuiEnableBindings = function (o) {
|
o = $.extend({ type: '',method:'Enable', options:function(v){return 'disabled';}, value: function (v) { return !v; } }, o);
|
var customBinding = {
|
update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
|
var enable = ko.toJS(valueAccessor());
|
$(element)[o.type](o.options(enable), o.value(enable));
|
}
|
};
|
ko.bindingHandlers[o.type + o.method] = customBinding;
|
};
|
ko.creatEasyuiEnableBindings({ type: 'linkbutton', options: function (b) { return {disabled:!b}; } });
|
ko.creatEasyuiEnableBindings({ type: 'linkbutton',method:'Disable', options: function (b) { return { disabled: b }; } });
|
|
//readonly
|
_readOnlyHandles = {};
|
_readOnlyHandles.defaults = function (obj, b) {
|
b ? obj.addClass("readonly").attr("readonly", true) : obj.removeClass("readonly").removeAttr("readonly");
|
};
|
_readOnlyHandles.combo = function (obj, b) {
|
obj.combo(b ? "disable" : "enable");
|
};
|
_readOnlyHandles.spinner = function (obj, b) {
|
obj.spinner(b ? "disable" : "enable");
|
};
|
|
ko.creatEasyuiReadOnlyBindings = function (o) {
|
o = $.extend({ type: '', handler: _readOnlyHandles.defaults }, o);
|
var customBinding = {
|
update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
|
o.handler($(element),ko.toJS(valueAccessor()));
|
}
|
};
|
ko.bindingHandlers[o.type ? (o.type + 'ReadOnly'): 'readOnly'] = customBinding;
|
};
|
|
ko.creatEasyuiReadOnlyBindings(); //default readonly
|
ko.creatEasyuiReadOnlyBindings({ type: 'numberbox' });
|
ko.creatEasyuiReadOnlyBindings({ type: 'combobox', handler: _readOnlyHandles.combo });
|
ko.creatEasyuiReadOnlyBindings({ type: 'datebox', handler: _readOnlyHandles.combo });
|
ko.creatEasyuiReadOnlyBindings({ type: 'lookup', handler: _readOnlyHandles.combo });
|
ko.creatEasyuiReadOnlyBindings({ type: 'combotree', handler: _readOnlyHandles.combo });
|
ko.creatEasyuiReadOnlyBindings({ type: 'numberspinner', handler: _readOnlyHandles.spinner });
|
|
//datagrid
|
ko.bindingHandlers.datasource = {
|
init: function (element, valueAccessor) {
|
var jq = jqElement(element);
|
var ds = ko.toJS(valueAccessor());
|
if ($.isFunction(ds)) ds = ds.call();
|
if (jq.data('treegrid'))
|
jq.treegrid('loadData', ds);
|
else if (jq.data('datagrid'))
|
jq.datagrid('loadData', ds);
|
else if (jq.data('combotree'))
|
jq.combotree('loadData', ds);
|
else if (jq.data('combobox')) {
|
var val = jq.combobox('getValue'), ds = ds.rows || ds;
|
jq.combobox('clear').combobox('loadData',ds).combobox('setValue', val);
|
}
|
else if (jq.data('tree'))
|
jq.tree('loadData', ds.rows || ds);
|
}
|
};
|
|
ko.creatEasyuiGridBindings = function (gridType) {
|
var gridBinding = {
|
update: function (element, valueAccessor, allBindingsAccessor, viewModel) {
|
var grid = jqElement(element), opts = ko.toJS(valueAccessor()), url = opts.url;
|
var customLoader = function (queryParams) {
|
if (opts.pagination) {
|
var paging = grid.datagrid('getPager').pagination('options');
|
queryParams = $.extend(queryParams, { page: paging.pageNumber, rows: paging.pageSize });
|
}
|
com.ajax({
|
type: 'get',
|
url: url,
|
data: queryParams,
|
success: function (d) {
|
if ($.isFunction(opts.afterCustomSuccess)) opts.afterCustomSuccess(d);
|
grid[gridType]('loadData', d);
|
}
|
});
|
};
|
|
if (opts.treeField && opts.parentField) { //only for treegrid
|
opts.loadFilter = function (data) {
|
return utils.toTreeData(data.rows || data, opts.idField||opts.treeField, opts.parentField, "children");
|
};
|
}
|
|
var handler = function () {
|
if (grid.data(gridType)) {
|
if (opts.customLoad)
|
customLoader(opts.queryParams);
|
else
|
grid[gridType](opts);
|
} else {
|
var defaults = {
|
iconCls: 'icon icon-list',
|
nowrap: true, //折行
|
rownumbers: true, //行号
|
striped: true, //隔行变色
|
singleSelect: true, //单选
|
remoteSort: true, //后台排序
|
pagination: false, //翻页
|
pageSize: com.getSetting("gridrows",20),
|
contentType: "application/json",
|
method: "GET"
|
};
|
var winsize = function (size) {
|
var ret = {};
|
if (size && size.w) ret.width = jqElement(window).width() - size.w;
|
if (size && size.h) ret.height = jqElement(window).height() - size.h;
|
return ret;
|
};
|
|
opts = $.extend(defaults, opts, winsize(opts.size));
|
if (opts.customLoad) {
|
if (opts.remoteSort)
|
opts.onSortColumn = function (sort, order) { customLoader($.extend(opts.queryParams, { sort: sort, order: order })); };
|
|
grid[gridType](opts);
|
customLoader(opts.queryParams);
|
|
if (opts.pagination)
|
grid[gridType]('getPager').pagination({ onSelectPage: customLoader });
|
}
|
else
|
grid[gridType](opts);
|
|
valueAccessor()[gridType] = function () { return grid[gridType].apply(grid, arguments); }
|
valueAccessor()['$element'] = function () { return grid; };
|
if (opts.size) jqElement(window).resize(function () { grid[gridType]('resize', winsize(opts.size)); });
|
}
|
};
|
|
grid[gridType] ? handler() : using([gridType], function () {
|
handler();
|
if (gridType=='treegrid') com.loadCss('/Content/css/icon/icon.css', document, true);//解决图标被tree.css覆盖的问题
|
});
|
}
|
};
|
|
return gridBinding;
|
};
|
|
ko.bindingHandlers.datagrid = ko.creatEasyuiGridBindings('datagrid');
|
ko.bindingHandlers.treegrid = ko.creatEasyuiGridBindings('treegrid');
|
|
//初始化控件
|
ko.createEasyuiInitBindings = function (o) {
|
o = $.extend({ type: '' },o);
|
var customBinding = {
|
init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
|
var jq = jqElement(element), opt = ko.mapping.toJS(valueAccessor());
|
var handler = function () {
|
jq[o.type](opt);
|
};
|
jq[o.type] ? handler() : using(o.type, handler);
|
|
//handle disposal (if KO removes by the template binding)
|
ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
|
jq[o.type]("destroy");
|
});
|
valueAccessor()["$element"] = function () { return jq };
|
},
|
update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
|
var jq = jqElement(element), opt = ko.mapping.toJS(valueAccessor());
|
if (jq[o.type]) jq[o.type](opt);
|
}
|
};
|
var bindName = 'easyui' + o.type.replace(/(^|\s+)\w/g, function (s) {return s.toUpperCase();});
|
ko.bindingHandlers[bindName] = customBinding;
|
};
|
|
ko.createEasyuiInitBindings({ type: 'tabs' });
|
ko.createEasyuiInitBindings({ type: 'tree' });
|
ko.createEasyuiInitBindings({ type: 'combotree' });
|
ko.createEasyuiInitBindings({ type: 'combobox' });
|
ko.createEasyuiInitBindings({ type: 'linkbutton' });
|
|
//width height
|
ko.bindingHandlers.inputwidth = {
|
update: function (element, valueAccessor, allBindingsAccessor, viewModel) {
|
var that = $(element), widthStr = ko.toJS(valueAccessor());
|
var calcWidth = function (w) {
|
var rate = 1
|
if (typeof w == 'string') {
|
if (w.indexOf("px") > -1 || w.indexOf("PX") > -1) w = w.replace("px", "").replace("PX", "");
|
if (w.indexOf("%") > -1) w = w.replace("%", "") / 100;
|
}
|
if (w > 0 && w <= 1) {
|
rate = w;
|
w = $(".val").width();
|
}
|
return w * rate;
|
};
|
|
var resizeWidth = function () {
|
var width = calcWidth(widthStr);
|
$.each([
|
{ selector: 'input.z-txt', handler: function (jq) { jq.width(width - 8); } }, //pading3*2 + border1*2 = 8
|
{ selector: 'input[comboname],input.combo-f', handler: function (jq) { jq.combo('resize', width); } },
|
{ selector: 'input[numberboxname].spinner-text', handler: function (jq) { jq.spinner('resize', width); } }
|
], function () {
|
var jq = that.find(this.selector);
|
if (jq.length > 0) this.handler(jq);
|
if (that.is(this.selector)) this.handler(that);
|
});
|
};
|
|
resizeWidth();
|
$(window).resize(resizeWidth);
|
}
|
};
|
|
ko.bindingHandlers.autoheight = {
|
update: function (element, valueAccessor, allBindingsAccessor, viewModel) {
|
var that = $(element), obserable = valueAccessor(),
|
height = $.isFunction(obserable) ? obserable() : obserable;
|
that.height($(window).height() - height);
|
$(window).resize(function () { that.height($(window).height() - height); });
|
}
|
};
|
ko.bindingHandlers.autowidth = {
|
update: function (element, valueAccessor, allBindingsAccessor, viewModel) {
|
var that = $(element), obserable = valueAccessor(),
|
width = $.isFunction(obserable) ? obserable() : obserable;
|
that.width($(window).width() - width);
|
$(window).resize(function () { that.width($(window).width() - width); });
|
}
|
};
|
|
//bindingViewModel
|
ko.bindingViewModel = function (viewModelInstance,node) {
|
using('parser', function () {
|
$.parser.onComplete = function () {
|
ko.applyBindings(viewModelInstance, node || document.body);
|
};
|
});
|
};
|
|
})(jQuery, ko);
|
