찾다

집 >웹 프론트엔드 >JS 튜토리얼 >jqgrid 간단한 연구 Notes_jquery

jqgrid 간단한 연구 Notes_jquery

WBOY
WBOY원래의
2016-05-16 18:07:021853검색

JqGrid 문서: http://www.trirand.com/jqgridwiki/doku.php?id=wiki:jqgriddocs

JqGrid 데모: http://trirand.com/blog/jqgrid/jqgrid.html#t107

여기에서는 JqGrid의 기본 사항을 소개하지 않겠습니다. 모르신다면 블로그 가든이나 구글 문서를 읽어보시는 것이 가장 좋습니다. 먼저 렌더링을 살펴보겠습니다.

clip_image002

이 데모는 쿼리, 수정, 그룹화할 수 있습니다. 추가, 삭제 등 일부 기본 기능은 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: "
그룹:
    < ;/ul>
< ;/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("
  • " currentYear.toString() "
    • ");
    else
    objul.append("
  • " (currentYear - index).toString() "
    • ");
    }
    } else {
    objul.append("
  • " currentYear.toString() "
    • ");
    }
    }
    $(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으로 문의하세요.
    이전 기사：jQuery 공통 연산 구현 방법과 공통 함수 메소드 요약_jquery다음 기사：jQuery 공통 연산 구현 방법과 공통 함수 메소드 요약_jquery

    관련 기사

    더보기