| 标题 | 简介EasyUI datagrid editor combogrid搜索框的实现 |
| 内容 | 这篇文章主要介绍了EasyUI datagrid editor combogrid搜索框的实现，涉及到EasyUI中combogrid的使用方法的相关知识,非常具有参考价值，需要的朋友可以参考下 首先需要datagrid editor对combogrid的扩展，这个是别人实现的： $.extend($.fn.datagrid.defaults.editors, { combogrid: { init: function (container, options) { var input = $('<input type="text">').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="0" cellspacing="0"> <tr> <td> <input id="userName_Member" placeholder="姓名/用户名" /> <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中combogrid的使用方法 ComboGrid用法和参数配置 1、需要引入class=" "easyui-combogrid”，必须应用在input或select元素中 2、参数设置需要在data-options中设置 3、属性参数配置： loadMsg：加载远程数据，显示的信息 idField：select中选择提交值 textField：select中选择的显示值 mode：定义如何加载DataGrid的数据文本的方式。当设置为“'remote'”模式下，什么类型的用户将被发送http请求参数名为'q'的服务器，以获取新的数据 filter：当数据加载时”mode”设置为”local”，如何选择本地数据源，返回true选择行 4、 方法 options（）：返回选择对象 grid（）：返回选择dataGrid对象 setValues（values）：设置元素值数组 setValue（value）:设置组件的值 clear（）：清除组件的值 |
| 随便看 |
|
在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。