jqgrid 간단한 연구 Notes_jquery
- WBOY원래의
- 2016-05-16 18:07:021783검색
JqGrid 문서: http://www.trirand.com/jqgridwiki/doku.php?id=wiki:jqgriddocs
JqGrid 데모: http://trirand.com/blog/jqgrid/jqgrid.html#t107
여기에서는 JqGrid의 기본 사항을 소개하지 않겠습니다. 모르신다면 블로그 가든이나 구글 문서를 읽어보시는 것이 가장 좋습니다. 먼저 렌더링을 살펴보겠습니다.
이 데모는 쿼리, 수정, 그룹화할 수 있습니다. 추가, 삭제 등 일부 기본 기능은 JqGrid Demo에서 확인할 수 있습니다.
논리적 아이디어: 올해 사업 계획 데이터를 처음으로 로드합니다. 로드가 완료된 후 JqGrid를 로컬 데이터로 설정하여 페이징 및 데이터 쿼리가 관습이 되도록 합니다. 이번 달 이후의 계획만 수정할 수 있으며 afterShowForm 및 afterclickPgButtons에서 확인이 이루어집니다. 시간이 이번 달 이하인 경우 제출 버튼이 비활성화됩니다. 그렇지 않으면 제출 버튼이 작동합니다. 서버에 제출하기 전에 JqGrid의 데이터 유형을 json으로 설정해야 합니다. 그렇지 않으면 서버가 요청되지 않습니다.
이 데모에서는 2010년, 2011년, 2012년 세 가지 정적 데이터 소스만 사용합니다. 데이터 수정 시 정보만 반환하고 데이터 소스 데이터는 수정하지 않습니다.
Apsx 페이지 코드:
🎜>JqGrid 구성 코드(Javascript):
코드 복사 코드는 다음과 같습니다.
jQuery("#jqgridlist").jqGrid({ url: 'DataHandler.ashx',
datatype: function (pdata) {
$.ajax({ url: 'DataHandler.ashx' ,
dataType: "json", 유형: "post",
contentType: "application/x-www-form-urlencoded; charset=utf-8",
data: pdata,
error : function (data, status, statusText) {
if (!(status == 200 && statusText == "parsererror"))
alert("클라이언트 측에서 데이터를 구문 분석하는 중 오류가 발생했습니다. 관리자에게 문의하세요." ) ;
else
alert "서버 오류를 요청하세요! 나중에 다시 시도하거나 관리자에게 문의하세요.")
},
complete: function (jsondata, stat) {
if ( stat = = "성공") {
var thegrid = jQuery("#jqgridlist")[0],
data = eval("(" jsondata.responseText ")")
thegrid.addJSONData( data) ;
data = null;
jsondata = null;
}
})
},
colNames: ["줄 번호", "날짜 기간", "c_code", "단위명", "매출수익", "영업이익", "총산업생산액", "총이익", "납세세액"],
colModel: [{ name: " ROWNUM", 색인: "ROWNUM", 편집 가능: false, summaryType: 'count',
summaryTpl: '({0}) total'
},
{ 이름: "JHQJ", 색인: " JHQJ", editable: true, stype: 'text', search: true, searchoptions: { sopt: ['eq'] },
editoptions: { 스타일: "border:0; background-color:transparent;"
},
{ 이름: "C_CODE", 색인: "C_CODE", 정렬 가능: false, 편집 가능: true, 검색: false, 숨김: true,
editrules: { edithidden: false }, editoptions: { 스타일: "테두리:0; 배경색:투명;" }
},
{ 이름: "DWJC", 색인: "DWJC", 편집 가능: true, 검색: true, stype: 'text' , 검색 옵션: { sopt: ['cn'] },
editoptions: { 스타일: "테두리:0; 배경색:투명;" }
},
{ 이름: "a21", 인덱스: "a21 ", editable: true, search: true, editrules: { number: true },
formatter: 'currency', summaryType: 'sum'
},
{ name: "a22", index: " a22", editable: true, search: true, editrules: { number: true },
formatter: 'currency', summaryType: 'sum'
},
{ name: "a23" , index: "a23", editable: true, search: true, editrules: { number: true },
formatter: 'currency', summaryType: 'sum'
},
{ name: "a24 ", index : "a24", 편집 가능: true, 검색: true, editrules: { 숫자: true },
포맷터: 'currency', summaryType: 'sum'
},
{ 이름: " a25", 색인: "a25", 편집 가능: true, 검색: true, editrules: { 숫자: true },
포맷터: 'currency', summaryType: 'sum'
}
],
height: 400,
autowidth: true,
width: 700,
rowNum: 70,
rowTotal: 1300,
rowList: [13, 70, 100],
rownumbers: false,
loadonce: true,
loadtext: '로드 중...',
forceFit: true,
gridview: true,
pager: '#pager',
sortname: 'ROWNUM ',
스크롤: 0,
페이지: 1,
viewrecords: true,
editurl: 'DataHandler.ashx',
sortorder: "asc",
jsonReader: {
root: "rows",
page: "page",
total: "total",
records: "records",
repeatites: false
} ,
그룹화 : false,
groupingView: {
groupField: ['DWJC'],
groupColumnShow: [true],
groupText: ['{0}< /b>'] ,
groupCollapse: false,
groupOrder: ['asc'],
groupSummary: [false],
groupDataSorted: true
},
gridComplete: function () {
$("#jqgridlist").setGridParam({ datatype: 'local' });
},
caption: "
jQuery("#jqgridlist").jqGrid({ url: 'DataHandler.ashx',
datatype: function (pdata) {
$.ajax({ url: 'DataHandler.ashx' ,
dataType: "json", 유형: "post",
contentType: "application/x-www-form-urlencoded; charset=utf-8",
data: pdata,
error : function (data, status, statusText) {
if (!(status == 200 && statusText == "parsererror"))
alert("클라이언트 측에서 데이터를 구문 분석하는 중 오류가 발생했습니다. 관리자에게 문의하세요." ) ;
else
alert "서버 오류를 요청하세요! 나중에 다시 시도하거나 관리자에게 문의하세요.")
},
complete: function (jsondata, stat) {
if ( stat = = "성공") {
var thegrid = jQuery("#jqgridlist")[0],
data = eval("(" jsondata.responseText ")")
thegrid.addJSONData( data) ;
data = null;
jsondata = null;
}
})
},
colNames: ["줄 번호", "날짜 기간", "c_code", "단위명", "매출수익", "영업이익", "총산업생산액", "총이익", "납세세액"],
colModel: [{ name: " ROWNUM", 색인: "ROWNUM", 편집 가능: false, summaryType: 'count',
summaryTpl: '({0}) total'
},
{ 이름: "JHQJ", 색인: " JHQJ", editable: true, stype: 'text', search: true, searchoptions: { sopt: ['eq'] },
editoptions: { 스타일: "border:0; background-color:transparent;"
},
{ 이름: "C_CODE", 색인: "C_CODE", 정렬 가능: false, 편집 가능: true, 검색: false, 숨김: true,
editrules: { edithidden: false }, editoptions: { 스타일: "테두리:0; 배경색:투명;" }
},
{ 이름: "DWJC", 색인: "DWJC", 편집 가능: true, 검색: true, stype: 'text' , 검색 옵션: { sopt: ['cn'] },
editoptions: { 스타일: "테두리:0; 배경색:투명;" }
},
{ 이름: "a21", 인덱스: "a21 ", editable: true, search: true, editrules: { number: true },
formatter: 'currency', summaryType: 'sum'
},
{ name: "a22", index: " a22", editable: true, search: true, editrules: { number: true },
formatter: 'currency', summaryType: 'sum'
},
{ name: "a23" , index: "a23", editable: true, search: true, editrules: { number: true },
formatter: 'currency', summaryType: 'sum'
},
{ name: "a24 ", index : "a24", 편집 가능: true, 검색: true, editrules: { 숫자: true },
포맷터: 'currency', summaryType: 'sum'
},
{ 이름: " a25", 색인: "a25", 편집 가능: true, 검색: true, editrules: { 숫자: true },
포맷터: 'currency', summaryType: 'sum'
}
],
height: 400,
autowidth: true,
width: 700,
rowNum: 70,
rowTotal: 1300,
rowList: [13, 70, 100],
rownumbers: false,
loadonce: true,
loadtext: '로드 중...',
forceFit: true,
gridview: true,
pager: '#pager',
sortname: 'ROWNUM ',
스크롤: 0,
페이지: 1,
viewrecords: true,
editurl: 'DataHandler.ashx',
sortorder: "asc",
jsonReader: {
root: "rows",
page: "page",
total: "total",
records: "records",
repeatites: false
} ,
그룹화 : false,
groupingView: {
groupField: ['DWJC'],
groupColumnShow: [true],
groupText: ['{0}< /b>'] ,
groupCollapse: false,
groupOrder: ['asc'],
groupSummary: [false],
groupDataSorted: true
},
gridComplete: function () {
$("#jqgridlist").setGridParam({ datatype: 'local' });
},
caption: "
| 그룹: | < ;/td>" }); 일부 속성 설명: 데이터 유형: json으로 설정하면 요청된 데이터는 json 형식입니다. 또한 모든 추가, 삭제, 확인 및 수정 작업은 서버에 요청됩니다. 로컬로 설정하면 모든 작업이 고객 서비스 측에서 완료되며 서버로 전송되지 않습니다. 함수로 설정하면(이 예 참조) 데이터를 얻을 때마다 이 함수로 처리됩니다. JS 코드를 디버깅하여 확인할 수 있습니다. rownumbers: false로 설정하면 행 번호가 표시되지 않습니다. 그렇지 않으면 그 반대가 true입니다. loadonce: true로 설정하면 데이터를 한 번에 가져옴을 나타냅니다. rowTotal: 한 번에 가져올 데이터의 최대 행 수입니다. jsonReader: 구성은 서버에서 반환된 데이터에 해당합니다. 자세한 내용은 http://www.trirand.com/jqgridwiki/doku.php?id=wiki:retrieving_data gridComplete: Load 문서를 참조하세요. 모든 데이터가 완료되고 다른 모든 처리 이벤트가 완료되면 실행됩니다. 영어 문서 설명: 이는 모든 데이터가 그리드에 로드되고 다른 모든 프로세스가 완료된 후에 발생합니다. 또한 이벤트는 데이터 유형 매개변수와 독립적으로 페이징 정렬 후에 발생합니다. 데이터가 로드될 때만 무언가를 트리거해야 하는 경우 함수에서는 loadComplete 이벤트를 사용할 수 있습니다. loadComplete: 이 이벤트는 모든 서버 요청 후 즉시 실행됩니다. data 데이터 유형 그리드 매개변수에 따른 응답 데이터 caption: 문자열 유형. 테이블의 제목입니다. 하지만 여기에 HTML 코드를 작성할 수 있습니다. 이는 약간의 트릭입니다. 그룹화: 그룹화하지 않으려면 기본값은 false이고 그 반대도 마찬가지입니다. groupingView: 그룹화 정보: 자세한 소개가 있는 JqGrid Demo를 참조하세요. 편집 URL: 编辑数据发送Url /////////////////////////////////// ///////////////////////////////////////////////// ///////////////////////////////////////////////// //// jQuery("#jqgridlist").jqGrid('navGrid', '#pager', { 편집: false, 추가: false, del: false }, {}, {}, {}, { multipleSearch: true, closeAfterSearch: true, closeOnEscape: true }) .navButtonAdd("#pager", { caption: "", buttonicon: "ui-icon-pencil", onClickButton : function () { var gr = jQuery("#jqgridlist").jqGrid("getGridParam", "selrow") if (gr != null) jQuery("#jqgridlist") .jqGrid("editGridRow", gr, { afterclickPgButtons: function (whichbutton, formid, rowid) { var ret = jQuery("#jqgridlist").jqGrid('getRowData', rowid), objYear = ret.JHQJ; if (!ValidateDate(objYear)) jQuery("#sData").attr('disabled', 'disabled') else jQuery("#sData") .removeAttr('disabled'); }, afterShowForm: function (formid) { var jqgrid = jQuery("#jqgridlist") var rowid = jqgrid.jqGrid("getGridParam" , "selrow"), ret = jqgrid.jqGrid('getRowData', rowid); if (!ValidateDate(ret.JHQJ)) jQuery("#sData").attr('disabled', 'disabled'); else jQuery("#sData").removeAttr('disabled'); }, beforeSubmit: 함수(postdata, formid) { var reg = "^(([1-9]\d*)|0)(\.\d{1,2}) ?$"; if (!Regex(reg, postdata.a21)) return [false, "销售回款 格式错误"]; if (!Regex(reg, postdata.a22)) return [false, "营业收入 格式错误"]; if (!Regex(reg, postdata.a23)) return [false, "工业总产值 格式错误"]; if (!Regex(reg, postdata.a24)) return [false, "利润总额 格式错误"]; if (!Regex(reg, postdata.a25)) return [false, "上交税金 格式错误"]; 그렇지 않으면 return [true, ""]; }, afterSubmit: 함수(응답, postdata) { var json = response.responseText; //형식은 {status:"success/error",msg:""} var result = eval("(" json ")"), Successs = false; if ("성공" == 결과.상태) { 성공 = true; $("#FormError td").html(result.msg); $("#FormError").show(); } return [성공, 결과.msg, ""]; } }); else alert("请选择行"); }, 위치: "첫번째", 제목: "修改", 커서: "포인터" }).filterToolbar({ stringResult: true, autosearch: true, searchOnEnter: false, groupOp: "AND" }); function Regex(reg, val) { var patt = new RegExp(reg, "g"); patt.test(val)를 반환합니다. } function ValidateDate(objYear) { var year = null, month = null, currentYear = null, date = new Date(); if (objYear.length == 4) { year =parseInt(objYear.substr(0, 4)); currentYear = parsInt(date.getFullYear()); } else { year = parseInt(objYear.substr(0, 6)) month = (date.getMonth() 1).toString(); 월 = 월.길이 == 1 ? "0" 월 : 월; currentYear = parsInt(date.getFullYear() 월); } if (연도 <= 현재 연도) false를 반환합니다. //不?可¨¦以°?编À¨¤辑- else return true; //可¨¦以°?编À¨¤辑- } }); ///////////////////////////////////////////// ///////////////////////////////////////////////// /// 动态改变分组 jQuery("#chngroup").live("change", function () { var vl = $(this).val(); if (vl) { if (vl == "clear") { jQuery("#jqgridlist").jqGrid('groupingRemove', true) } else { jQuery("#jqgridlist"). jqGrid('groupingGroupBy', vl) } } }); ///////////////////////////////////////////// ///////////////////////////////////////////////// //////// 슬라이더 控代码 function CreateYearList() { var currentYear =parseInt(new Date().getFullYear()); var mulitYear = 현재 연도 - 1990; var objul = $(".slider_context ul"); if (mulitYear >= 0) { for (var index = -1, len = mulitYear; index <= len; index ) { if (currentYear - index == currentYear) objul.append(" else objul.append(" } } else { objul.append(" } } $(function () { CreateYearList(); $(".slider").silder({ speed: "normal", SlideBy: 2 }); $(".slider_context li").live("click", function () { $.each($(".slider_context li"), function (id, item) { $( this).removeClass('selected'); }) $(this).addClass('selected') var yearVal = $(this).html(); jqgrid = $("#jqgridlist"); jqgrid.setGridParam({ datatype: 'json' }); jqgrid.jqGrid('appendPostData', { year: yearVal, f: "year" }); jqgrid.trigger("reloadGrid"); jqgrid.jqGrid('removePostDataItem', "f") }) /////////////////////////////////////// /// ////////////////////////////////////////////// ////// /////////////////////////////////// var jqgrid = $ ("#jqgridlist");//즉, 수정하기 전에 데이터 유형을 json으로 변경하세요. 그렇지 않으면 서버로 다시 보낼 수 없습니다. jqgrid.setGridParam({ datatype: 'json' }); 🎜>jqgrid.jqGrid('appendPostData', { year: yearVal, f: "year" });//PostData 추가 jqgrid.trigger("reloadGrid");//JqGrid 다시 로드 jqgrid.jqGrid( 'removePostDataItem', "f");/ /PostData 삭제 ////////////////////////////////// ////////////// /////////////////////////////////// //////////////// /////////////////////// gridComplete: 함수() { $("#jqgridlist").setGridParam({ datatype: 'local ' }) }, 로딩이 완료될 때마다 jqgrid를 로컬 데이터로 설정합니다. 데모 다운로드 주소 /201105/yuanma/JqGridDemo.rar 성명： 본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요. 관련 기사더보기 |