Introduction to the implementation of EasyUI datagrid editor combogrid search box_javascript skills

First we need the datagrid editor extension to combogrid, which was implemented by others:

$.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);
}
}
});

Then write the search box inside the div

<div id="Marketer_ID_Member_bar">
<table cellpadding="0" cellspacing="0" 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>

Bind via toolbar: "#Marketer_ID_Member_bar"

The next step is to follow the way we apply combogrid in other places. The specific search method sy.memberInfo.userSearch_Member is as follows:

$('#Marketer_ID_Member').combogrid('grid').datagrid('options').queryParams.Name = $("#userName_Member").val();
$('#Marketer_ID_Member').combogrid('grid').datagrid('reload');

However, there is no clear ID in the editor to find elements. At this time, my first reaction was to add an ID myself, so I tried to add an attribute "id" to the editor, but it didn't work.

Next, try to find its parent through Marketer_ID_Member_bar when the combogrid is loaded (the idea is that it is the toolbar of the combogrid, and the combogrid should be found through it) and assign the id. The result is that the assignment is successful, but the Marketer_ID_Member_bar The parent is not a combogrid, failed.

At this time I thought of looking at the use of combogrid in other places, and finally found that if I convert an input into combogrid through $('#txtInputID').combogrid({});, the class of this input will be It becomes easyui-validatebox combogrid-f combo-f validatebox-text. Through comparison, it is found that when the editor uses it, the style of the input box of this column is: datagrid-editable-input combogrid-f combo-f,

This should be the real owner. It is also inconvenient to set the id, so we use the style selector, so the final sy.memberInfo.userSearch_Member method looks like this:

$('.combogrid-f').combogrid('grid').datagrid('options').queryParams.Name = $("#userName_Member").val();
$('.combogrid-f').combogrid('grid').datagrid('reload');

It’s also quite tortuous. I did a little research during development and didn’t solve it, so I ignored it because there is another way to avoid it, which is to not use the editor and edit through the pop-up box, so there is no need to worry too much. After having a little free time today, I took another look and finally found a solution that works.

The above content is a brief introduction to the implementation of the EasyUI datagrid editor combogrid search box. I hope it will be helpful to everyone!

How to use combogrid in EasyUI

ComboGrid usage and parameter configuration

1. Class=" "easyui-combogrid" needs to be introduced, which must be applied in the input or select element

2. Parameter settings need to be set in data-options

3. Attribute parameter configuration:

loadMsg: Load remote data, displayed information

idField: Select the submitted value in select

textField: Display value selected in select

mode: Define how to load the data text of the DataGrid. When set to "'remote'" mode, what type of user will be sent to the server with http request parameter named 'q' to obtain new data

filter: When the data is loaded, "mode" is set to "local", how to select the local data source and return true to select the row

4. Method

options(): Return the selection object

grid(): Returns the selected dataGrid object

setValues(values): Set element value array

setValue(value): Set the value of the component

clear(): clear the value of the component