关于EasyUI datagrid editor combogrid搜索框的实现
首先需要datagrid editor对combogrid的扩展,这个是别人实现的:
$.extend($.fn.datagrid.defaults.editors, {
combogrid: {
init: function (container, options) {
var input = $('<input type="text" class="datagrid-editable-input">').appendTo(container);
input.combogrid(options);
return input;
},
destroy: function (target) {
$(target).combogrid('destroy');
},
getValue: function (target) {
return $(target).combogrid('getValue');
},
setValue: function (target, value) {
$(target).combogrid('setValue', value);
},
resize: function (target, width) {
$(target).combogrid('resize', width);
}
}
});
然后将搜索框写在div里面
<div id="Marketer_ID_Member_bar">
<table cellpadding="" cellspacing="" style="width: 100%;">
<tr>
<td style="text-align: right; padding-right: 15px">
<input id="userName_Member" placeholder="姓名/用户名" style="width: 100px; border: 0;" />
<input type="button" value="查询" onclick="sy.memberInfo.userSearch_Member();" />
</td>
</tr>
</table>
</div>
通过toolbar: "#Marketer_ID_Member_bar"来绑定
下面肉戏来了,按照我们在别的地方应用combogrid的做法,具体的搜索方法sy.memberInfo.userSearch_Member里面是这样的:
$('#Marketer_ID_Member').combogrid('grid').datagrid('options').queryParams.Name = $("#userName_Member").val();
$('#Marketer_ID_Member').combogrid('grid').datagrid('reload');
然而,在editor里面没有明确的id用来寻找元素,此时第一反应是自己加一个ID行不行,于是我尝试给editor加一个属性“id”,然并卵。
接下来尝试在combogrid加载完成的时候通过Marketer_ID_Member_bar来关联找到它的父级(思路是它是作为combogrid的toolbar,通过它应该能找到combogrid)并赋值id,结果能赋值成功,但是Marketer_ID_Member_bar的父级并不是combogrid,失败。
此时想到去看看别的地方使用combogrid的情况,最终发现,如果我通过$('#txtInputID').combogrid({});把一个input转化成combogrid,此input的class会被变成easyui-validatebox combogrid-f combo-f validatebox-text,通过对比,发现在editor使用的时候,该列的输入框的样式是:datagrid-editable-input combogrid-f combo-f,
这应该就是正主了,同样不方便设置id,于是我们使用样式选择器,所以最终sy.memberInfo.userSearch_Member方法里是这样的:
$('.combogrid-f').combogrid('grid').datagrid('options').queryParams.Name = $("#userName_Member").val();
$('.combogrid-f').combogrid('grid').datagrid('reload');
也是够曲折的,前面开发的时候稍微研究了下没有解决好就没理它,因为还有一个办法可以避过,就是不使用editor,通过弹出框来编辑,也就不是很着急,今天稍微闲一点,又来看看,最终找到个能用的方案。
关于EasyUI datagrid editor combogrid搜索框的实现的更多相关文章
- easyui datagrid toolbar 添加搜索框
最近用到了就研究了下,效果 把列名稍加转换放入menubtton,对于单项搜索来说还是非常方便的 var fields = $('#tt').datagrid('getColumnFields') ...
- easyUI datagrid editor扩展dialog
easyUI datagrid简单使用:着重两点1.editor对象的click事件:2.将dialog窗体内的值填写到当前正编辑的单元格内 <!DOCTYPE html> <htm ...
- easyui datagrid editor checkbox 单击事件
Easyui datagrid treegrid中能够为行追加checkbox元素.比如: $('#tt').treegrid({ url:'get_data.php', idField:'id', ...
- easyui datagrid editor combobox添加空选则清空combobox框
<script type='text/javascript'> var editIndex = undefined; $(function() { $('#tb1').datagrid({ ...
- easyui datagrid combobox下拉框获取数据问题
最近在使用easyui的datagrid,在可编辑表格中添加一个下拉框,查了下API,可以设置type : 'combobox',来做下拉框,这下拉框是有了,可是这后台数据怎么传过来呢,通过查API可 ...
- Easyui datagrid editor为combobox时指定数据源
当在datagrid行内部应用添加编辑操作时,引入combobox是非常方便的操作,我在引入combobox时对数据源这快做个总结,在做demo的过程中遇到个问题,就是当你选择了下拉框的值后点击保存, ...
- easyui Datagrid+searchbox 实现搜索功能
1.前台页面 <%@ page language="java" pageEncoding="utf-8" isELIgnored="false& ...
- easyui datagrid 通过复选框删除新追加的数据问题
之前写好的功能在保存好数据后再通过复选框删除是没有问题的,可现在想多追加几行,然后选择删除新追加的某几行或一行,通过$('#dg').datagrid('getChecked')方法返回选中行,然而返 ...
- easyui datagrid editor onBeforeEdit事件下使用getEditor和getEditors失效
我在使用onClickRow: function(rowIndex,rowData){ if(editRow!=-1){ ...
随机推荐
- js 算法排序总结
1.冒泡排序JavaScript代码实现: function bubbleSort(arr) { var len = arr.length; for (var i = 0; i < len; i ...
- 【转载】使用IntelliJ IDEA 配置Maven(入门)
1. 下载Maven 官方地址:http://maven.apache.org/download.cgi 解压并新建一个本地仓库文件夹 2.配置本地仓库路径 3.配置maven环境变量 ...
- Chat Group gym101775A(逆元,组合数)
传送门:Chat Group(gym101775A) 题意:一个宿舍中又n个人,最少k(k >= 3)个人就可以建一个讨论组,问最多可以建多少个不同的讨论组. 思路:求组合数的和,因为涉及除法取 ...
- JAVA经典题--死锁案例
死锁原理: 两个线程相互等待对方释放同步监视器 例子程序: public class TestDeadLock implements Runnable { public int flag = 1; s ...
- 爬虫文件存储:txt文档,json文件,csv文件
5.1 文件存储 文件存储形式可以是多种多样的,比如可以保存成 TXT 纯文本形式,也可以保存为 Json 格式.CSV 格式等,本节我们来了解下文本文件的存储方式. 5.1.1 TXT文本存储 将数 ...
- Grails里DOMAIN类的一对一,一对多,多对多关系总结及集成测试
终于干完这一章节,收获很多啊. 和DJANGO有类似,也有不同. User.groovy: package com.grailsinaction class User { String loginId ...
- 快速傅立叶变换&HDU 1402
参考http://www.cnblogs.com/v-July-v/archive/2011/08/13/2214132.html <算导> 那么,更快速的多项式乘法就依赖于能否把一个系数 ...
- 2.2-VLAN间路由
2.2-VLAN间路由 第一代LAN间的通信: 不支持VLAN的交换机:由一个路由器和几个交换机组成,每个交换机的所有端口都同属于一个网段/LAN:在路由器上有几个网段就有几个与之相对 ...
- 全栈JavaScript之路(十)学习 DocumentFragment 类型 节点
DocumentFragment 类型节点,代表一个文档片段,是一种轻量级的'文档' 对象.能够包括其他类型节点,并有能力訪问.操作当中的节点,可是在文档中没有文档标记,相当于是一个页面不可见的容器. ...
- 【LeetCode OJ 232】Implement Queue using Stacks
题目链接:https://leetcode.com/problems/implement-queue-using-stacks/ 题目:Implement the following operatio ...