DataGrid Framework_jquery 기반 쿼리

复主代码 代码如下: &lt ;div data-options="region:'south',title:'South Title',split:true" style="height: 100px;"> 然后是CenterPage.html框架中的代码,也就是탭框架中的代码:

复主代码 代码如下: //레이아웃 프레임이 href를 가리키는 경우 html 페이지 본문의 중간 부분만 가져오기 때문입니다. , 페이지는 다음과 같습니다. // 일부 데이터그리드에는 많은 속성이 포함되어 있으므로 js를 사용하여 데이터그리드 프레임워크를 초기화해 보세요. $(function () { $("#dg"). datagrid({ url: "GetJson.ashx", //일반 핸들러나 컨트롤러를 가리킵니다. 반환 데이터는 Json 형식이어야 합니다. Json 형식 데이터를 직접 할당할 수도 있습니다. Json을 사용하겠습니다. 데모와 함께 제공되는 데이터는 배경 코드이지만 배경에서 반환되는 주의 사항에 대해 설명하겠습니다. iconCls: "icon-add", fitColumns: false, // 가로 스크롤을 방지하기 위해 열을 테이블 너비에 자동으로 맞추려면 true로 설정합니다. false는 자동으로 크기를 일치시킵니다 //toolbar 테이블 상단에 도구 모음을 설정하고 배열 형태로 설정합니다 idField: 'id', //식별 열은 일반적으로 id로 설정되며 대소문자를 구분할 수 있으므로 주의하시기 바랍니다. loadMsg: "Working hard to load data for you", //데이터를 로드할 때 사용자에게 표시되는 명령문 pagination: true, //하단 페이징 도구 모음 표시 rownumbers: true, //행 수 1, 2, 3, 4 표시... pageSize: 10, //행 수를 읽습니다. 페이징 항목, 즉 백그라운드로 데이터를 읽을 때 전달되는 값 pageList: [10, 20, 30] , //각 페이지에 표시되는 데이터를 조정할 수 있습니다. 즉, pageSize 데이터를 매번 조정할 수 있습니다. 백그라운드에서 데이터를 요청합니다 //데이터 그리드에 속성이 너무 많기 때문에 각각에 대해 소개하지 않겠습니다. 필요한 경우 해당 API를 읽을 수 있습니다 sortName: "name", //언제 기준으로 정렬하는 필드입니다. 테이블 초기화는 데이터베이스의 필드 이름과 동일해야 합니다 sortOrder: "asc", //정렬 순서 columns: [[ { field: 'code', title: 'Code', width: 100 }, { field: 'name', title: 'Name', width: 100, sortable: true },//sortable:true 해당 열을 클릭하면 오름차순, 내림차순을 변경할 수 있습니다. { field: 'addr', title: 'addr', width: 100 } ]],//여기에 대괄호가 두 개 있는 이유는 Crystal Report 형식으로 할 수 있기 때문입니다. , 데모 참조 toolbar: [{//dategrid 양식의 머리에 버튼 추가 text: "Add", iconCls: "icon-add", handler: function () { } }, '-', {//'-'는 두 개의 버튼을 구분하기 위해 수직선을 추가하는 것으로 편안해 보입니다. text: "Delete", iconCls: " icon-remove", handler: function () { } }, '-', { text: "Modify", iconCls: "icon- edit", 핸들러: 함수 () { } }, '-'] }); }); //이벤트를 트리거하려면 검색 버튼을 클릭하세요 function searchFunc() { alert("123"); $("#dg").datagrid("load", sy. serializeObject($ ("#searchForm").form()));//searchForm 양식의 요소 시퀀스를 객체로 배경에 전달 }

//이벤트를 트리거하려면 지우기 버튼을 클릭하세요 functionclearSearch() { $("#dg").datagrid("load", {});//데이터를 다시 로드하고 데이터는 없습니다. is fill in, to 백그라운드에 전달된 값이 비어 있습니다 $("#searchForm").find("input").val("");//양식 아래의 모든 입력 태그를 찾아 지우세요 } &lt ;/script> &lt ;form id="searchForm"> 사용자 이름: 생성 시작 시간 생성 종료 시간 찾기 지우기

Jquery 확장 코드:

코드 복사 코드는 다음과 같습니다. var sy = $.extend({} , sy) ;/*전역 변수 정의*/ sy.serializeObject = function (form) { /*양식의 요소를 객체로 직렬화합니다. 이는 Jquery를 확장하는 메서드입니다.*/ var o = {}; $.each(form.serializeArray() , 함수(색인) { if (o[this['name']]) { o[this['name']] = o[this['name']] "," this[' value']; } else { o[this['name']] = this['value']; } }); return o; } ;

이미지: