本文共计1660个文字，预计阅读时间需要7分钟。
对Webix中的datatable进行数据扩展，使用自定义比较函数：
javascript(function() { webix.lcextend=webix.lcextend || {}; function defaultcompare(item1, item2) { if (item1 > item2) return 1; else if (item1===item2) return 0; }})();
对webix中的datatable进行数据拓展
///
/**
* 对webix中的datatable进行数据拓展
*/
(function() {
webix.lcextend = webix.lcextend || {};
function defaultcompare(item1, item2) {
if (item1 > item2)
return 1
else if (item1 === item2)
return 0
else
return -1;
}
webix.lcextend.getSortFunc = function(group) {
return function(item1, item2) {
for (var i = 0; i < group.length; i++) {
var itemconf = group[i];
if (typeof itemconf == "string") {
itemconf = {
key: itemconf,
dir: "asc",
func: defaultcompare
}
}
var dir = itemconf.dir || "asc"; //当前升序还是降序
if (dir == "asc") {
dir = 1;
} else {
dir = -1;
}
var func = itemconf.func || defaultcompare; //比较函数
var key = itemconf.key; //key值
//var value = func(item1[key], item2[key]);
var value;
if (func == defaultcompare)
value = func(item1[key], item2[key]);
else
value = func(item1, item2);
if (value == 0)
continue;
else
return dir * value;
}
return 0;
}
};
function cloneSpan(spans, from, dest) {
if (typeof dest == "string") {
dest = [dest];
}
var spanslength = spans.length,
item;
for (var i = 0; i < spanslength; i++) {
item = spans[i];
if (item[1] == from) {
for (var j = 0; j < dest.length; j++) {
item = webix.extend([], item);
item[1] = dest[j];
spans.push(item);
}
}
}
}
webix.extend(webix.ui.datatable, {
getData: function() {
///
/// 获取当前table中的所有行数据
///
///
所有行数据组成的数组
var dts = [];
var datastore = this.data;
for (var i = 0; i < datastore.order.length; i++) {
dts.push(datastore.pull[datastore.order[i]]);
}
return dts;
},
calculateSpan: function(group, clones, sort) {
///
/// 计算单元格合并，只能进行树状结构的合并
/// 备注:可以在此方法上面进行相同单元格合并的拓展
///
///
进行合并的列id，越靠前越靠近根节点
///
需要进行合并克隆的信息
/// item结构:
/// {
/// from:string,
/// dest:[string,....]
/// }
///
///
//数据排序
var sortconf = [];
var colum;
for (var i = 0; i < group.length; i++) {
colum = this.getColumnConfig(group[i]);
sortconf.push({
key: group[i],
dir: colum ? colum.dir : null,
func: colum ? colum.func : null
});
}
if (sort instanceof Array) {
for (var i = 0; i < sort.length; i++) {
if (sortconf.indexOf(sort[i]) == -1) {
colum = this.getColumnConfig(sort[i]);
sortconf.push({
key: sort[i],
dir: colum ? colum.dir : null,
func: colum ? colum.func : null
})
}
}
}
if (sort !== false)
this.sort(webix.lcextend.getSortFunc(sortconf));
//分组
if (typeof group == "string") {
group = [group];
}
var spans = [],
data;
if (this.config.pager) {
//表示要进行分页操作;
data = [];
var coll = this.getData();
var size = this.getPager().config.size;
var page = this.getPage();
var length = size * page + size;
for (var i = size * page; i < ((coll.length - length) > 0 ? length : coll.length); i++) {
data.push(coll[i]);
}
} else {
data = this.getData();
}
var positionmark = {};
var groupkey = "";
for (var i = 0; i < data.length; i++) {
groupkey = "";
for (var j = 0; j < group.length; j++) {
groupkey += ((j == 0) ? "" : ",") + data[i][group[j]];
if (positionmark[groupkey]) { //存在
positionmark[groupkey][3] = i;
} else {
positionmark[groupkey] = [i, groupkey, group[j], i];
}
}
}
var row, item;
for (var i in positionmark) {
item = positionmark[i];
row = [];
row[0] = data[item[0]]["id"];
row[1] = item[2];
row[2] = 1;
row[3] = item[3] - item[0] + 1;
spans.push(row);
}
if (!clones || typeof clones !== "object")
return spans;
if (!(clones instanceof Array))
clones = [clones];
for (var i = 0; i < clones.length; i++) {
cloneSpan(spans, clones[i].from, clones[i].dest);
}
return spans;
},
refreshSpan: function(group, clones) {
this.removeSpan();
var spans = this.calculateSpan.apply(this, arguments);
this.addSpan(spans);
this.refresh();
},
getTag: function() {
return this.config.tag; //datatable 关联的tag
},
setTag: function(value, key) {
if (key && typeof key == "string") {
if (this.config.tag === undefined || this.config.tag === null) //没有进行定义
this.config.tag = {};
this.config.tag[key] = value;
} else {
this.config.tag = value;
}
},
getcolumns: function() {
var show = this.getshowcolumns();
var hide = this.gethidecolumns();
return [].concat(show, hide);
},
getshowcolumns: function() {
// return this._columns;//columns
return this.config.columns;
},
gethidecolumns: function() {
var cls = [];
if (this._hidden_column_hash) {
for (var i in this._hidden_column_hash) {
cls.push(this._hidden_column_hash[i]);
}
}
return cls;
},
gettablehtml: function() {
var trs = this.$view.getElementsByTagName("tr");
var html = [];
html.push("");
for (var i = 0; i < trs.length; i++) {
if (trs[i].innerText) {
html.push(trs[i].outerHTML);
}
}
html.push("")
html.push("");
var data = this.getData();
var columns = this.getshowcolumns();
for (var i = 0; i < data.length; i++) {
html.push("");
for (var j = 0; j < columns.length; j++) {
if (columns[j].template && typeof columns[j].template === "function") {
html.push("" + columns[j].template(data[i], this.type, data[i][columns[j].id], columns[j], i) + "");
} else {
html.push("" + data[i][columns[j].id] + "");
}
}
html.push("");
}
html.push("");
var table = document.createElement("table");
table.innerHTML = html.join("");
var spans = this.getSpan(); //获取所有span信息
for (var rowid in spans) {
var rowindex = this.getIndexById(rowid); //获取行index
for (var colid in spans[rowid]) {
var colindex = this.getColumnIndex(colid); //获取列index
if (colindex == -1) {
continue;
}
//进行合并操作
var value = spans[rowid][colid];
var colspan = value[0];
var rowspan = value[1];
var tdvalue = value[2];
var td = table.querySelector('td[rowid="' + rowindex + '"][colid="' + colindex + '"]');
if (td) {
if (tdvalue) {
td.innerHTML = tdvalue;
}
td.colSpan = colspan;
td.rowSpan = rowspan;
for (var rowi = 0; rowi < rowspan; rowi++) {
for (var colj = 0; colj < colspan; colj++) {
if (rowi == 0 && colj == 0) {
continue;
}
var selected = table.querySelector('td[rowid="' + (rowindex + rowi) + '"][colid="' + (colindex + colj) + '"]');
selected && selected.parentNode && selected.parentNode.removeChild(selected);
}
}
}
}
}
return table;
}
});
webix.extend(webix.ui.datatable, {
$init: function() {
this.$ready.push(function() {
this.callEvent("onDataTableReady", {});
});
}
})
webix.extend(webix.ui.treetable, {
getchilds: function(rowid) {
var row = this.getItem(rowid)
var result = [];
if (row.$count && row.$count > 0) {
var childid = this.getFirstChildId(rowid);
for (var i = 0; i < row.$count; i++) {
if (i !== 0) {
childid = this.getNextSiblingId(childid)
}
result.push(this.getItem(childid));
}
}
return result;
},
getparent: function(rowid) {
var pid = this.getParentId(rowid);
if (pid) {
return this.getItem(pid);
}
return null;
}
});
var comboextend = {
NullGuid: "00000000-0000-0000-0000-000000000000",
_applyChanges: function(e) {
var input = this.getInputNode();
var newvalue = "";
var suggvalue = webix.$$(this.config.suggest).getValue();
if (!suggvalue) {
if (input.value) {
this.config.value = comboextend.NullGuid;
this.config.text = input.value;
return;
}
}
if (input.value)
newvalue = webix.$$(this.config.suggest).getSuggestion() || this.config.value;
if (newvalue != this.config.value)
this.setValue(newvalue, true);
else
this.$setValue(newvalue);
},
setValue: function(newvalue, text) {
if (newvalue === comboextend.NullGuid) {
var input = this.getInputNode();
input.value = text;
this.config.text = input.value;
this.config.value = comboextend.NullGuid;
} else {
this.oldsetValue.apply(this, arguments);
}
},
$setValue: function(newvalue) {
if (newvalue === comboextend.NullGuid) {
var input = this.getInputNode();
input.value = this.config.text;
} else
this.old$setValue.apply(this, arguments);
},
registEvent: function() {
var _self = this;
var markchange = "";
webix.event(this.getInputNode(), "keydown", function(e) {
if (webix.isUndefined(this.value)) {
markchange = this.innerHTML;
} else {
markchange = this.value;
}
console.log("keydown:" + markchange);
});
webix.event(this.getInputNode(), "input", function(e) {
var value = "";
if (webix.isUndefined(this.value)) {
value = this.innerHTML;
} else {
value = this.value;
}
if (value != markchange) {
webix.$$(_self.config.suggest)._suggestions(e);
}
console.log("input:" + value);
});
}
}
webix.extend(webix.ui.combo, {
extendFilter: function() {
if (this.$isExtendFilter) {
return;
}
this.$isExtendFilter = true;
comboextend.registEvent.apply(this);
this.attachEvent("onAfterRender", comboextend.registEvent);
//this.attachEvent("onAfterRender", function () {
// var _self = this;
// var markchange = "";
// webix.event(this.getInputNode(), "keydown", function () {
// if (webix.isUndefined(this.value)) {
// markchange = this.innerHTML;
// } else {
// markchange = this.value;
// }
// });
// webix.event(this.getInputNode(), "propertychange", function () {
// var value = "";
// if (webix.isUndefined(this.value)) {
// value = this.innerHTML;
// } else {
// value = this.value;
// }
// if (value != markchange) {
// webix.$$(_self.config.suggest)._suggestions(e);
// }
// });
//})
},
extendEditable: function() {
///
/// 支持编辑输入的功能
///
var _self = this;
if (this.$isExtendEditable) {
return;
}
this.$isExtendEditable = true;
this.old_applyChanges = this._applyChanges;
this._applyChanges = comboextend._applyChanges;
this.old$setValue = this.$setValue;
this.$setValue = comboextend.$setValue;
this.oldsetValue = this.setValue;
this.setValue = comboextend.setValue;
//var inputvalue = "";
//this.attachEvent("onBeforeRender", function () {
// var node = this.getInputNode();
// webix.event(node, "change", function () {
// if (webix.isUndefined(this.value)) {
// inputvalue = this.innerHTML;
// } else {
// inputvalue = this.value;
// }
// });
//})
//this.attachEvent("onAfterRender", function () {
// var node = this.getInputNode();
// webix.event(node, "change", function () {
// if (webix.isUndefined(this.value)) {
// this.innerHTML = inputvalue;
// } else {
// this.value = inputvalue;
// }
// _self._applyChanges();
// });
//});
this.refresh();
}
})
webix.protoUI({
name: "filtermultisuggest",
defaults: {
body: {
rows: [{
view: "text",
on: {
onKeyPress: function() {
var popup = this.getParentView().getParentView();
popup.setValue(popup.getValue());
}
}
},
{
view: "list",
type: "multilist",
borderless: true,
autoheight: true,
yCount: 5,
multiselect: "touch",
select: true,
on: {
onItemClick: function(id) {
var popup = this.getParentView().getParentView();
webix.delay(function() {
popup._toggleOption(id);
});
}
}
},
{
view: "button",
click: function() {
var suggest = this.getParentView().getParentView();
suggest.setMasterValue({ id: suggest.getValue() });
suggest.hide();
}
}
]
}
},
Jt: function(obj) {
return obj.rows[1];
},
_d: function() {
//button text 显影控制
var button = this.getButton();
var text = (this.config.button ? (this.config.buttonText || webix.i18n.controls.select) : 0);
if (button) {
if (text) {
button.config.value = text;
button.refresh();
} else
button.hide();
}
var filter = this.getText();
filter.setValue("");
filter.refresh();
},
getText: function() {
return this.getBody().getChildViews()[0];
},
getButton: function() {
return this.getBody().getChildViews()[2];
},
getList: function() {
return this.getBody().getChildViews()[1];
},
setValue: function(value) {
var text = [];
var list = this.getList();
list.unselect();
if (value) {
if (typeof value == "string")
value = value.split(this.config.separator);
if (value[0]) {
for (var i = 0; i < value.length; i++) {
if (list.getItem(value[i])) {
if (list.exists(value[i]))
list.select(value[i], true);
text.push(this.getItemText(value[i]));
}
}
}
}
this.config.value = value ? value.join(this.config.separator) : "";
return text;
},
getValue: function() {
return this.config.value;
}
}, webix.ui.multisuggest);
}())
