EasyUi의 Combogrid는 원격 data_javascript 기술의 페이징 및 동적 검색을 구현합니다.

jquery easyui의 Combogrid는 콤보와 그리드의 조합입니다. Combogrid는 편집 가능한 텍스트 상자와 드롭다운 데이터 그리드 패널을 결합하여 사용자가 빠르게 찾고 선택하고, 검색하고, 현재 입력할 수 있도록 해줍니다. 문자가 데이터와 일치합니다. 데이터의 양이 많으면 콤보그리드에 페이징 기능이 있어야 합니다. 원격 데이터의 페이징 및 동적 검색을 구현하기 위해 EasyUi에 Combogrid를 소개하겠습니다.

$('#mallid').combogrid({ 
panelWidth:500, 
idField:'mallid', //ID字段 
textField:'mallname', //显示的字段 
url:"../global/datagrid.aspx?act=malllist", 
fitColumns: true, 
striped: true, 
editable:true, 
pagination : true,//是否分页 
rownumbers:true,//序号 
collapsible:false,//是否可折叠的 
fit: true,//自动大小 
pageSize: 10,//每页显示的记录条数，默认为10 
pageList: [10],//可以设置每页记录条数的列表 
method:'post', 
columns:[[ 
{field:'mallname',title:'商城名称',width:150,sortable:true}, 
{field:'url',title:'网址',width:150} 
]], 
keyHandler: { 
up: function() {}, 
down: function() {}, 
enter: function() {}, 
query: function(q) { 
//动态搜索 
$('#mallid').combogrid("grid").datagrid("reload", { 'keyword': q }); 
$('#mallid').combogrid("setValue", q); 
} 
} 
}); 

최근 프로젝트 작업을 할 때 jquery easyui를 사용했는데, 제공되는 공식 데모가 너무 단순하고 관련 예제가 없는 기능이 많았습니다. 인터넷에는 정보가 거의 없기 때문에 데모를 직접 작성할 수 밖에 없습니다. 여기에 간단히 기록해 보세요.

1.easyUi 콤보트리는 트리 노드의 동적 로딩을 구현합니다.

2.easyUi 콤보그리드는 원격 데이터의 페이징 및 동적 검색을 구현합니다

몇 가지 지식을 추가해 보겠습니다.

1. ComboGrid 공통 속성 매개변수 구성

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

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

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

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

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

2. ComboGrid의 일반적인 방법

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

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

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

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

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