EasyUI 데이터그리드 편집기 콤보그리드 검색 box_javascript 기술 구현 소개

먼저 다른 사람이 구현한 콤보그리드에 대한 데이터그리드 편집기 확장이 필요합니다.

$.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="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>

툴바를 통해 바인딩: "#Marketer_ID_Member_bar"

다음 단계는 다른 곳에서 콤보그리드를 적용하는 방식을 따르는 것입니다. 구체적인 검색 방법 sy.memberInfo.userSearch_Member는 다음과 같습니다.

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

그런데 에디터에 요소를 찾을 수 있는 명확한 ID가 없습니다. 이때 제가 처음 반응한 부분은 ID를 직접 추가하는 것이었기 때문에 에디터에 "id" 속성을 추가하려고 했으나 그렇지 않았습니다. 일하다.

다음으로 콤보그리드가 로드될 때 Marketer_ID_Member_bar를 통해 상위 항목을 찾고(이것은 콤보그리드의 도구 모음이고 이를 통해 콤보그리드를 찾아야 한다는 것입니다) 결과는 할당입니다. 성공했지만 Marketer_ID_Member_bar 상위가 콤보 그리드가 아니어서 실패했습니다.

이때 다른 곳에서 콤보그리드의 사용법을 살펴볼까 생각하다가 마침내 $('#txtInputID').combogrid({});를 통해 입력을 콤보그리드로 변환하면 이 클래스를 발견하게 되었습니다. 입력은 easyui-validatebox 콤보그리드-f 콤보-f 검증박스-텍스트가 됩니다. 비교를 통해 편집기에서 사용할 경우 이 열의 입력 상자 스타일은 datagrid-editable-input 콤보그리드-f임을 알 수 있습니다. 콤보-f,

이것이 실제 소유자여야 합니다. ID 설정도 불편하므로 스타일 선택기를 사용하므로 최종 sy.memberInfo.userSearch_Member 메서드는 다음과 같습니다.

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

개발 중에 좀 연구해봤는데 해결이 안 되서, 에디터를 사용하지 않고 팝업창을 통해 편집하는 방법이 또 있기 때문에 무시했습니다. , 그러니 너무 걱정할 필요는 없습니다. 오늘 약간의 여유 시간을 갖고 다시 살펴보더니 마침내 작동하는 해결책을 찾았습니다.

위 내용은 EasyUI 데이터그리드 편집기 콤보그리드 검색창 구현에 대한 간략한 소개입니다. 모든 분들께 도움이 되길 바랍니다!

EasyUI에서 콤보그리드를 사용하는 방법

ComboGrid 사용 및 매개변수 구성

1. Class=" "easyui-combogrid"를 도입해야 하며, 이는 입력 또는 선택 요소에 적용되어야 합니다

2. 데이터 옵션에서 매개변수 설정이 필요합니다

3. 속성 매개변수 구성:

loadMsg: 원격 데이터, 표시된 정보 로드

idField: select에서 제출된 값을 선택하세요

textField: 선택에서 선택된 값을 표시합니다

모드: DataGrid의 데이터 텍스트를 로드하는 방법을 정의합니다. "'원격'" 모드로 설정하면 어떤 유형의 사용자가 새 데이터를 얻기 위해 'q'라는 http 요청 매개변수를 사용하여 서버로 전송됩니다.

필터: 데이터가 로드되면 "모드"가 "로컬"로 설정되고, 로컬 데이터 소스를 선택하고 true를 반환하여 행을 선택하는 방법

4. 방법

options(): 선택 개체를 반환합니다

grid(): 선택한 dataGrid 객체를 반환합니다.

setValues(values): 요소 값 배열 설정

setValue(value): 구성요소의 값을 설정합니다

clear(): 구성 요소의 값을 지웁니다