EasyUi 컨트롤 의 Datagrid 상세 설명
줄 내 편집 을 하기 전에 우 리 는 EasyUi 를 사용 하여 DataGrid 를 만 드 는 방법 을 알 아야 한다.물론 방식 은 매우 많다(1.easyui.js,또는 직접 html 코드 에 easyui 의 Style).나 는 JS 방식 을 사용한다.
1.Js 로 DataGrid 만 들 기
위 는 효과 도,
Html 코드 는 다음 과 같 습 니 다.페이지 에 table 을 정의 합 니 다.
<!-- -->
<div>
<table id="DataGridInbound"></table>
</div>제 가 생각 하 는 중요 한 속성 이 몇 개 있 습 니 다.
url:여 기 는 datagrid 가 데이터 세트 를 가 져 오 는 주소 입 니 다.바로 Action 입 니 다.주의해 야 할 것 은 Action 이 JSon 형식의 데 이 터 를 되 돌려 야 한 다 는 것 입 니 다.
pagination:datagrid 의 페이지 표시 여 부 를 설정 합 니 다.
query Params:검색 조건 파라미터
formatter:포맷,날짜 열 에 사 용 됩 니 다.EasyUi 의 datagrid 디 스 플레이 날짜 가 포맷 되 지 않 으 면 날짜 가 함부로 표 시 됩 니 다.
이 속성 들 은 EasyUi 홈 페이지 에 상세 하 게 소개 되 어 있 으 니 깊이 설명 하지 않 겠 습 니 다.
$("#DataGridInbound").datagrid({
title: ' ',
idField: 'Id',
rownumbers: 'true',
url: '/Inbound/GetPageInboundGoodsDetail',
pagination: true,// datagrid
rownumbers: true,
singleSelect: true,
striped: true,
nowrap: true,
collapsible: true,
fitColumns: true,
remoteSort: false,
loadMsg: " ， ...",
queryParams: { ProductName: "", Status: "",SqNo:"" },
onLoadSuccess: function (data) {
if (data.total == 0) {
var body = $(this).data().datagrid.dc.body2;
body.find('table tbody').append('<tr><td width="' + body.width() + '" style="height: 35px; text-align: center;"><h1> </h1></td></tr>');
$(this).closest('div.datagrid-wrap').find('div.datagrid-pager').hide();
}
// reload
else $(this).closest('div.datagrid-wrap').find('div.datagrid-pager').show();
},
columns: [[
{ field: 'ck', checkbox: true },
{ field: 'Id', hidden: 'true' },
{ field: 'InBoundId', hidden: 'true' },
{ field: 'ProductId', hidden: 'true' },
{ field: 'ProductTypeId', hidden: 'true' },
{ field: 'SqNo', title: ' ', width: '100', align: 'left', sortable: true },
{
field: 'Status', title: ' ', width: '100', align: 'left', sortable: true,
formatter: function (value, index, row) {
if (value == "1") {
return '<span style="color:green;"> </span>';
}
else if (value == "-1") {
return '<span style="color:#FFA54F;"> </span>';
}
}
},
{
field: 'InboundDate', title: ' ', width: '100', align: 'left', sortable: true,
formatter: function (date) {
var pa = /.*\((.*)\)/;
var unixtime = date.match(pa)[1].substring(0, 10); //
return getTime(unixtime);
}
},
{ field: 'ProductName', title: ' ', width: '100', align: 'left', sortable: true },
{ field: 'ProductType', title: ' ', width: '100', align: 'left', sortable: true },
{ field: 'Num', title: ' ', width: '100', align: 'left', sortable: true },
{ field: 'Storage', title: ' ', width: '100', align: 'left', sortable: true },
{ field: 'CompanyCode', title: ' ', width: '100', align: 'left', sortable: true },
{ field: 'CreateBy', title: ' ', width: '100', align: 'left', sortable: true },
]],
});
위의 효과 그림 과 같이 저 희 는 DataGrid 줄 에서 데 이 터 를 직접 바 꿉 니 다.
JS 코드 는 다음 과 같 습 니 다.
줄 내 편집 을 어떻게 실현 하 는 지 는 편집 한 셀 에 editor 속성 을 추가 해 야 합 니 다.editor 속성 은 type(그 는 많은 컨트롤 형식 을 지원 합 니 다.홈 페이지 에서 볼 수 있 습 니 다)이 편집 한 컨트롤 형식 입 니 다.
예 를 들 어 위의 그림 에서'입고 상태'는 먼저 데이터 원본 을 정의 하고 json 형식 이 중점 입 니 다.
var InboundStatus = [{ "value": "1", "text": " " }, { "value": "-1", "text": " " }];
function unitformatter(value, rowData, rowIndex) {
if (value == 0) {
return;
}
for (var i = 0; i < InboundStatus.length; i++) {
if (InboundStatus[i].value == value) {
return InboundStatus[i].text;
}
}
}formatter:앞에서 정의 한 변환 형식 함 수 를 사용 합 니 다.
options:중의 data 는 우리 가 정의 한 데이터 원본 입 니 다.
value Field:선 택 된 value 값,자세히 설명 할 필요 없 잖 아 요.
textField:선택 한 값,텍스트 값 입 니 다.
type:combobox,드 롭 다운 옵션 의 스타일 입 니 다.
{
field: 'Status', title: ' ', formatter: unitformatter, editor: {
type: 'combobox', options: { data: InboundStatus, valueField: "value", textField: "text" }
}
},
// Grid Js 。
$("#dataGrid").datagrid({
title: " ",
idField: 'ProductID',
treeField: 'ProductName',
onClickCell: onClickCell,
striped: true,
nowrap: true,
collapsible: true,
fitColumns: true,
remoteSort: false,
sortOrder: "desc",
pagination: true,// datagrid
rownumbers: true,
singleSelect: false,
loadMsg: " ， ...",
url: "/Inbound/GetProductPage",
onLoadSuccess: function (data) {
if (data.total == 0) {
var body = $(this).data().datagrid.dc.body2;
body.find('table tbody').append('<tr><td width="' + body.width() + '" style="height: 35px; text-align: center;"><h1> </h1></td></tr>');
$(this).closest('div.datagrid-wrap').find('div.datagrid-pager').hide();
}
// reload
else $(this).closest('div.datagrid-wrap').find('div.datagrid-pager').show();
},
columns: [[
{ field: 'ck', checkbox: true },
{ field: 'ProductID', title: ' ID', hidden: true },
{ field: 'CategoryID', title: ' ID', hidden: true },
{ field: 'ProductName', title: ' ', width: '100', align: 'left', sortable: true },
{ field: 'CompanyCode', title: ' ', width: '100', align: 'center', sortable: true },
{ field: 'CategoryName', title: ' ', width: '100', align: 'center', sortable: true },
{ field: 'Num', title: ' ', editor: 'numberbox' },
{
field: 'Status', title: ' ', formatter: unitformatter, editor: {
type: 'combobox', options: { data: InboundStatus, valueField: "value", textField: "text" }
}
},
{
field: 'InDate', title: ' ', width: '100', editor: {
type: 'datebox'
}
},
{
field: 'Storage', width: '100', title: ' ',
formatter: function (value, row) {
return row.Storage || value;
},
editor: {
type: 'combogrid', options: {
//url: '/Storage/GetAllStorage',
//url:'/Product/GetAllCustomerAddress',
rownumbers: true,
data: $.extend(true, [], sdata),
idField: 'AddressID',
textField: 'Name',
columns: [[
{ field: 'AddressID', hidden: true },
{ field: 'Name', title: ' ' },
{ field: 'Country', title: ' ' },
{ field: 'Province', title: ' ' },
{ field: 'City', title: ' ' },
{ field: 'Area', title: ' ' },
{ field: 'Address', title: ' ' },
]],
loadFilter: function (sdata) {
if ($.isArray(sdata)) {
sdata = {
total: sdata.length,
rows: sdata
}
}
return sdata;
},
}
}
}
]],
onBeginEdit: function (index, row) {
var ed = $(this).datagrid('getEditor', { index: index, field: 'Storage' });
$(ed.target).combogrid('setValue', { AddressID: row.AddressID, Name: row.Name });
},
onEndEdit: function (index, row) {
var ed = $(this).datagrid('getEditor', { index: index, field: 'Storage' });
row.Storage = $(ed.target).combogrid('getText');
},
onClickRow: function (index, row) {//getEditor
var ed = $(this).datagrid('getEditor', { index: index, field: 'Storage' });
if (ed != undefined) {
var s = row.Storage;
for (var i = 0; i < sdata.length; i++) {
if (s == sdata[i].Name) {
$(ed.target).combogrid('setValue', sdata[i].AddressID);
}
}
}
}
});설명:저 는 datagrid 에 드 롭 다운 datagrid 컨트롤 을 추 가 했 습 니 다.제 가 처음 선택 한 후에 datagrid 줄 을 클릭 하면 선택 한 드 롭 다운 datagrid 컨트롤 의 값 이 지 워 집 니 다.이 문 제 는 저 를 오랫동안 괴 롭 혔 지만 나중에 처 리 했 습 니 다.그 느낌 도 아주 시원 합 니 다!
위의 효과 그림 과 같이'들 어 가 는 창고'열 은 datagrid 이 고 그의 전문 어 휘 는'Combogird'입 니 다.바로 이 게임 입 니 다.첫 번 째 선택 은 괜 찮 습 니 다.두 번 째 클릭 은 첫 번 째 선택 한 값 을 지 웁 니 다.이것 도 처음에 나 는 이지 우의 OnClickRow 사건 에 대해 잘 몰 랐 다.
먼저 내 이전의 오류 코드 를 입력 하 세 요:
onClickRow: function (index, row) {//getEditor
var ed = $(this).datagrid('getEditor', { index: index, field: 'Storage' });
$(ed.target).combogrid('setValue', row.Name);
}
}
}var ed = $(this).datagrid('getEditor', { index: index, field: 'Storage' })"그리고 ed 가 null 인 것 을 발 견 했 습 니 다.Js 가 이상 을 던 졌 지만 화면 에 보이 지 않 고 선택 한 데 이 터 를 지 웠 습 니 다.문 제 를 찾 은 후에 도 확실 하지 않 습 니 다.코드 를 수정 하고 다시 실행 합 니 다.정상적으로 표시 되 고 제 가 선택 한 값 도 지 워 지지 않 습 니 다.정확 한 코드 는 다음 과 같 습 니 다.
onClickRow: function (index, row) {//getEditor
var ed = $(this).datagrid('getEditor', { index: index, field: 'Storage' });
if (ed != undefined) {
var s = row.Storage;
for (var i = 0; i < sdata.length; i++) {
if (s == sdata[i].Name) {
$(ed.target).combogrid('setValue', sdata[i].AddressID);
}
}
}
}
function synchroAjaxByUrl(url) {
var temp;
$.ajax({
url: url,
async: false,
type: 'get',
dataType: "json",
success: function (data) {
temp = data;
}
});
return temp;
}
var sdata = synchroAjaxByUrl('/Product/GetAllCustomerAddress');위 에서 말씀 드 린 것 은 편집장 님 께 서 소개 해 주신 EasyUi 컨트롤 중의 Datagrid 입 니 다.여러분 께 도움 이 되 셨 으 면 좋 겠 습 니 다.궁금 한 점 이 있 으 시 면 메 시 지 를 남 겨 주세요.편집장 님 께 서 바로 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
EasyUI 생성 트리, 탭 열기 클릭텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
