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开发网
ligerui combobox ajax,ligerui给ligerForm中的ligerComboBox添加事件相关推荐
- 第四篇 fluter中为应用添加事件和导航
第四篇 fluter中为应用添加事件和导航 一.添加事件 1.需要声明一个收藏集合_saved 2._buildRow中传入已经收藏的集合 3.添加点击事件 二.导航跳转 1.导航栏由RandomWo ...
- html页面中给元素添加事件常见的3种语法
1. 使用元素的事件属性 1.1 用法 onxxxx="f();" 例如为Btn按钮添加单击事件 <script> function aaa(){alert(" ...
- 深入理解JavaScript的闭包特性如何给循环中的对象添加事件
初学者经常碰到的,即获取HTML元素集合,循环给元素添加事件.在事件响应函数中(event handler)获取对应的索引.但每次获取的都是最后一次循环的索引.原因是初学者并未理解JavaScript ...
- ajax拿table里的th值,Jquery Ajax 异步设置Table中某列的值
可根据table中某列中的ID去改变某列的值! 只是参考,实际应用中不能这样做的,如果有很多行,频繁访问服务器,服务器是顶不住的! JS: $(document).ready(function () ...
- ajax实现给JavaScript中全局变量赋值(转)
原文地址:ajax实现给JavaScript中全局变量赋值 问题简化: <script type="text/javascript"> var a=1 ; functi ...
- ajax 文件数据流,Ajax如何读取数据流中的xml文件?
Ajax如何读取数据流中的xml文件? 这是我的源代码,请大家帮忙看看,我读到的怎么都是空值.是不是方法错了? var xmlHttp; function createXMLHttpRequest() ...
- 简单实现AJAX: ASP.NET2.0 中回调的实现及常见问题的解决
本文示例代码 接触asp.net时间并不长,对其中的很多新技术抱有浓厚的兴趣,最近在项目中碰到需要实现无刷新更新数据控件的问题,起初考虑使用ajax.pro,atlas实现,但感觉这两种实现对 ...
- vue赋值与ajax什么区别,Vue中ajax返回的结果赋值
这是第二次在项目中遇到此问题,ajax请求成功后在success函数中为Vue实例data里的变量赋值,却失败了 new Vue({ el:'#app', data:{ msg:'' }, creat ...
- jap页面使用ajax动态加载列表数据,JSF - 使用AJAX调用基于DataTable中的mimetype值加载不同形式...
对于我的一个项目,我需要根据DataTable组件中可用的mimetype值加载不同的表单.我有标题,内容 - 中间的DataTable和页脚中的数据显示.单击DataTable条目应根据mimety ...
最新文章
- ffmpeg 视频处理命令集合
- Netty - I/O模型之BIO
- 前端构建工具gulp之基本介绍
- 一文读懂除法溢出-使用汇编重定向0号中端(除法错误中断,比如,执行div指令产生的除法溢出)
- python itchat 的使用
- 【数据结构与算法】之深入解析“丑数”的求解思路与算法示例
- js Blob对象介绍
- codeforces E. Picking Strings 构造
- 热血江湖战无止境与服务器连接不稳定,《热血江湖》V14.0“战无止境”新版玩不停...
- css框架和js框架_优雅设计的顶级CSS框架
- SAP License:初学作业费用分割
- android新对象锁,Android的线程和对象锁定
- C++ eof()函数相关应用技巧分享
- log4cpp乱码_log4cxx配置使用(一)
- java 图表 word_java Freemark模板生成word图表及目录
- 亚稳态与同步器及其Verilog实现
- 安装Bouncy Castle(JAVA)
- ubuntu控制台访问u盘_虚拟机ubuntu访问u盘
- 探索 Sa-Token (一) SpringBoot 集成 Sa-Token
- 无法登录QQ和wegame,连接超时