jqGrid 사용 총화

최근 에 아주 좋 은 데이터 디 스 플레이 플러그 인 을 사 용 했 습 니 다.jquery 를 기반 으로 한 것 입 니 다.이 플러그 인 은 기능 이 매우 강하 고 사용 하기에 도 괜 찮 습 니 다.extjs 를 사용 하 는 것 만큼 좋 지 는 않 지만 이 플러그 인 은 더욱 경량급 입 니 다.
      지난주 에 또 비슷 한 문 제 를 만 났 는데 하 나 를 찾 으 려 고 인터넷 에서 마구 찾 았 지만 찾 지 못 했 습 니 다.나중에 자신 이 비슷 한 일 을 한 적 이 있다 는 것 을 알 게 되 었 지만 기록 되 지 않 아 발생 했 습 니 다.사실 이 또 한 번 증명 되 었 다.게 으 른 사람 은 안 된다!
      말 도 마 세 요.jqGrid 를 사용 하 는 것 은 사실 간단 합 니 다.비교적 간단 한 코드 를 첨부 합 니 다.

jsp          ，      ，     
<table id="list"></table>
<div id="pager"></div>


var listOptions = {
	colNames : ['ID', 'Name'],
	colModel : [{
				name : 'id',
				index : 'id',
				width : 55,
				editable : false,
				hidden : true,
				editoptions : {
					readonly : true,
					size : 10
				}
			}, {
				name : 'name',
				index : 'name',
				width : 90,
				editable : true,
				editoptions : {
					size : 20
				},
				editrules: { required: true}
			},{
				name : 'school',
				index : 'school',
				width : 90,
				editable : true,
				edittype : "select",
				editoptions : {
					dataUrl : getContentPath() + 'a.do?abbreviation&.rand=' + Math.random()
				},
				editrules: { required: true}
			}],
	// caption : "List",
	height : 348,
	width : 600,
	viewrecords : true,
	multiselect : false,
	pager : '#pager',
	rowNum : 100,
	rownumbers : true,
	headertitles : true,
	sortname : 'id',
	url : 'query.do',
	editurl : "edit.do",
	datatype : "json",
	sortorder : "desc",
	pginput : false,
	pgbuttons : false,
	jsonReader : {
		repeatitems : false
	}
};
function init() {

	jQuery("#list").jqGrid(listOptions);
	jQuery("#list").jqGrid('navGrid', '#pager', {
				edit : true,
				add : true,
				del : true,
				search : false
			}, // options
			{
				editCaption : "Edit",
				top : "0",
				left : "310",
				jqModal : false,
				reloadAfterSubmit : true,
				afterShowForm : function(form) {
					$("#etdDate").datepicker({
						dateFormat : "yy-mm-dd"
					});
				},
				afterSubmit : function(response, postdata) {
					var message= getMessage(response);
					if(message&&message.name=='validation'){
						return [false,message.message] ;
					}else {
						return [true,''] ;
					}
				}
			}, // edit options
			{
				addCaption : "add",
				top : "0",
				left : "310",
				jqModal : false,
				reloadAfterSubmit : true,
				afterShowForm : function(form) {
					$("#etdDate").datepicker({
						dateFormat : "yy-mm-dd"
					});
				},
				afterSubmit : function(response, postdata) {
					var message= getMessage(response);
					if(message&&message.name=='validation'){
						return [false,message.message]; 
					}else {
						return [true,''] ;
					}
				}
			}, // add options
			{
				reloadAfterSubmit : true
			}, // del options
			{} // search options
			);
	jQuery("#list").jqGrid('setLabel', 'name', '', {
				'text-align' : 'left'
			});

}
$(function() {
			init();
		});

 효 과 는 당연히 매우 간단 하 다.하나의 목록,하나의 페이지 라벨,첨삭 과 검 사 는 모두 있다.
  이것 은 중요 한 것 이 아니 라,중요 한 것 은 jqgrid 가 자주 사용 하 는 명령 들이다.
 
  명령 1  jQuery("#list").jqGrid('getCol','styleNumber',false);
    설명:jqGrid 의 열 을 가 져 옵 니 다.첫 번 째 값 이 비어 있 는 것 같 습 니 다.따라서 옮 겨 다 닐 때 for 순환 에서 if(obj){}를 기억 하 십시오.
  명령 2  jQuery("#list").getGridParam('selarrrow'); 
     설명:jqGrid 가 선택 한 여러 줄 의 기록 id 열 값 을 얻 었 습 니 다.첫 번 째 값 도 비어 있 는 것 같 습 니 다.그 러 니까 판단 부터 하 는 게 좋 을 거 야.이 명령 을 사용 하 는 전 제 는 jqGrid 의 multiselect 가 다 중 선택 을 설정 하 는 것 입 니 다.
  명령 3  jqGrid.jqGrid('getGridParam', 'selrow')
    설명:선택 한 줄 기록 의 단일 id 획득
  명령  $(listId).jqGrid('restoreRow', this.lastsel)
     설명:편집 상태 에 있 는 줄 을 비 편집 상태 로 만 들 었 지만 편집 한 값 을 저장 할 수 없 는 것 같 아서 골 치 아 팠 습 니 다.
   명령  $(listId).jqGrid('editRow', id, true, null, null, null, null, function() {         DataControl.setNewStyleInfoFromRemote(id);         return true;        });
     설명:한 줄 을 편집 상태 에 두 십시오.그러나 상 태 를 편집 한 후에 그 는 value 를' 
유용 한 명령 외 에 도 유용 한 총화 가 있다.
1 만약 당신 의 어떤 속성 이 텍스트 필드 에 대응한다 면,이 텍스트 필드 의 너비 와 높이 를 어떻게 조정 합 니까?하하 설정 rows:"6",    cols:"68"이 속성 을 연결 하면 됩 니 다.