ligerui combobox ajax,ligerui给ligerForm中的ligerComboBox添加事件

当通过ligerForm的fields配置类型为select的combobox时，给options配置tree中添加相关事件，如onSelect，这样是无法触发事件的。因为通过ligerForm来配置comboBox时，字段field的配置对象会转换为对应的JSON字符串赋值给一个输入控件的ligerui自定义属性，转为对应的JSON字符串时，属性值为函数的属性会自动丢失，导致ligerui自定义属性中并没有这个事件的定义。

ligerUI 版本1.1.9，本示例只修改了单个插件的源代码，如果你要一次性导入所有的ligerUI，如ligerui.min.js，这个文件时eval加密过的，无法修改。

可以一次性导入ligerui.all.js，自己找到对应的代码进行修改，要eval压缩的话自己找工具进行压缩，不过文件代码太多，可能导致eval压缩失败。

推荐2个工具：http://app.baidu.com/app/enter?appid=121305和http://www.jb51.net/tools/eval/

示例代码如下

$(function () {

var form = $("#formsearch").ligerForm({

fields: [{ display: "卡类", id: "ClassID", name: "ClassID", newline: true, labelWidth: 60, width: 200, space: 10,

type: "select", comboboxName: "ClassIDClassName",

options: { selectBoxHeight: 300, tree: { onSelect: comboOnSelect, url: '../tree/tree.json', treeLeafOnly: true, checkbox: false, nodeWidth: 220 }, valueFieldID: "text" },

attr: { op: "equal" }, cssClass: "field"

}]

});

});

window.comboOnSelect = function (node) {alert(JSON.stringify(node)) }

生成的dom对象会有个自定义属性ligerui用来存储field的配置，但是onSelect已经被去掉，如下图所示

解决办法：

1)事件配置为字符串如onSelect:'comboOnSelect'或者onSelect:'function (node) {alert(JSON.stringify(node))'，建议是传递一个全局函数变量名，要不你的直接传递函数体字符串如果逻辑太复杂就不好处理。

2)修改Source\lib\ligerUI\js\plugins下的ligerForm.js，替换一下配置转换为JSON字符串后的事件值，将事件值的双引号去掉。

//out.push(" ligerui='" + p.toJSON(fieldOptions) + "' ");//找到这句，大概在这个js文件的倒数第10行

//===>修改为

var attrligerui = p.toJSON(fieldOptions);

attrligerui = attrligerui.replace(/("on[a-zA-Z]+"):"([^\"]+)"/g, '$1:$2');//替换事件

out.push(" ligerui='" + attrligerui + "' ");

3)修正事件配置中的覆盖为题，修改Source\lib\ligerUI\js\plugins下的ligerComboBox.js，这个当配置tree后，此文件会重写过onCheck、onSelect，onCancelSelect事件，导致配置的事件被覆盖掉，找到setTree方法，替换如下

setTree: function (tree) {//bug，这里会出现事件覆盖，要注意存储原来的配置事件才行，要不原始的配置事件会被这里覆盖掉

var g = this, p = this.options;

this.clearContent();

g.selectBox.table.remove();

if (tree.checkbox != false) {

var configonCheck = tree.onCheck//存储配置的onCheck事件

tree.onCheck = function () {

if (typeof configonCheck == 'function') configonCheck(node); //如果配置的事件则调用

var nodes = g.treeManager.getChecked();

var value = [];

var text = [];

$(nodes).each(function (i, node) {

if (p.treeLeafOnly && node.data.children) return;

value.push(node.data[p.valueField]);

text.push(node.data[p.textField]);

});

g._changeValue(value.join(p.split), text.join(p.split));

};

}

else {//这里如果没配置checkbox为true会覆盖配置的onSelect函数，调试半天原来是这里覆盖了，fuck...

var configonSelect = tree.onSelect;//存储配置的onSelect事件

tree.onSelect = function (node) {

if (typeof configonSelect=='function') configonSelect(node);//如果配置的事件则调用

if (p.treeLeafOnly && node.data.children) return;

var value = node.data[p.valueField];

var text = node.data[p.textField];

g._changeValue(value, text);

};

var configonCancelSelect = tree.onCancelSelect//存储配置的onCancelSelect事件

tree.onCancelSelect = function (node) {

if (typeof configonCancelSelect == 'function') configonCancelSelect(node); //如果配置的事件存在则调用

g._changeValue("", "");

};

}

tree.onAfterAppend = function (domnode, nodedata) {

if (!g.treeManager) return;

var value = null;

if (p.initValue) value = p.initValue;

else if (g.valueField.val() != "") value = g.valueField.val();

g.selectValueByTree(value);

};

g.tree = $("

$("div:first", g.selectBox).append(g.tree);

g.tree.ligerTree(tree);

g.treeManager = g.tree.ligerGetTreeManager();

}

最终示例代码

$(function () {

var form = $("#formsearch").ligerForm({

fields: [{ display: "卡类", id: "ClassID", name: "ClassID", newline: true, labelWidth: 60, width: 200, space: 10,

type: "select", comboboxName: "ClassIDClassName",

options: { selectBoxHeight: 300, tree: { onSelect: 'comboOnSelect'/*注意这里配置为字符串，而不是直接函数名称*/, url: '../tree/tree.json', treeLeafOnly: true, checkbox: false, nodeWidth: 220 }, valueFieldID: "text" },

attr: { op: "equal" }, cssClass: "field"

}]

});

});

window.comboOnSelect = function (node) {alert(JSON.stringify(node)) }

加支付宝好友偷能量挖...

2014-6-12Web开发网