复主代码 代码如下: < ;div data-options="region:'south',title:'South Title',split:true" style="height: 100px;">< div data-options="region:'west',title:'West',split:true" style="width: 100px;"> 然后是CenterPage.html框架中的代码,也就是탭框架中的代码: 复主代码 代码如下: <br>//레이아웃 프레임이 href를 가리키는 경우 html 페이지 본문의 중간 부분만 가져오기 때문입니다. , 페이지는 다음과 같습니다. <br> // 일부 데이터그리드에는 많은 속성이 포함되어 있으므로 js를 사용하여 데이터그리드 프레임워크를 초기화해 보세요. <br>$(function () {<br>$("#dg"). datagrid({<br> url: "GetJson.ashx", //일반 핸들러나 컨트롤러를 가리킵니다. 반환 데이터는 Json 형식이어야 합니다. Json 형식 데이터를 직접 할당할 수도 있습니다. Json을 사용하겠습니다. 데모와 함께 제공되는 데이터는 배경 코드이지만 배경에서 반환되는 주의 사항에 대해 설명하겠습니다. <br>iconCls: "icon-add",<br>fitColumns: false, // 가로 스크롤을 방지하기 위해 열을 테이블 너비에 자동으로 맞추려면 true로 설정합니다. false는 자동으로 크기를 일치시킵니다 <br>//toolbar 테이블 상단에 도구 모음을 설정하고 배열 형태로 설정합니다 <br> idField: 'id', //식별 열은 일반적으로 id로 설정되며 대소문자를 구분할 수 있으므로 주의하시기 바랍니다. <br>loadMsg: "Working hard to load data for you", //데이터를 로드할 때 사용자에게 표시되는 명령문 <br>pagination: true, //하단 페이징 도구 모음 표시<br>rownumbers: true, //행 수 1, 2, 3, 4 표시...<br>pageSize: 10, //행 수를 읽습니다. 페이징 항목, 즉 백그라운드로 데이터를 읽을 때 전달되는 값<br>pageList: [10, 20, 30] , //각 페이지에 표시되는 데이터를 조정할 수 있습니다. 즉, pageSize 데이터를 매번 조정할 수 있습니다. 백그라운드에서 데이터를 요청합니다<br>//데이터 그리드에 속성이 너무 많기 때문에 각각에 대해 소개하지 않겠습니다. 필요한 경우 해당 API를 읽을 수 있습니다<br>sortName: "name", //언제 기준으로 정렬하는 필드입니다. 테이블 초기화는 데이터베이스의 필드 이름과 동일해야 합니다<br>sortOrder: "asc", //정렬 순서<br>columns: [[<br>{ field: 'code', title: 'Code', width: 100 },<br>{ field: 'name', title: 'Name', width: 100, sortable: true },//sortable:true 해당 열을 클릭하면 오름차순, 내림차순을 변경할 수 있습니다. <br>{ field: 'addr', title: 'addr', width: 100 }<br>]],//여기에 대괄호가 두 개 있는 이유는 Crystal Report 형식으로 할 수 있기 때문입니다. , 데모 참조<br>toolbar: [{//dategrid 양식의 머리에 버튼 추가<br>text: "Add",<br>iconCls: "icon-add",<br>handler: function () {<br>}<br>}, '-', {//'-'는 두 개의 버튼을 구분하기 위해 수직선을 추가하는 것으로 편안해 보입니다.<br>text: "Delete",<br>iconCls: " icon-remove",<br>handler: function () {<br>}<br>}, '-', {<br>text: "Modify",<br>iconCls: "icon- edit",<br>핸들러: 함수 () {<br>}<br>}, '-']<br>});<br>}); <p>//이벤트를 트리거하려면 검색 버튼을 클릭하세요<br>function searchFunc() {<br>alert("123");<br>$("#dg").datagrid("load", sy. serializeObject($ ("#searchForm").form()));//searchForm 양식의 요소 시퀀스를 객체로 배경에 전달<br>}</p> <p>//이벤트를 트리거하려면 지우기 버튼을 클릭하세요<br>functionclearSearch() {<br>$("#dg").datagrid("load", {});//데이터를 다시 로드하고 데이터는 없습니다. is fill in, to 백그라운드에 전달된 값이 비어 있습니다 <br>$("#searchForm").find("input").val("");//양식 아래의 모든 입력 태그를 찾아 지우세요 <br>}<br>< ;/script><br><div class="easyui-tabs" fit="true" border="false"><br><div title="데이터 표시 테이블" border ="false" fit=" true"><br><div class="easyui-layout" fit="true" border="false"><br><!--쿼리에는 입력 조건이 필요하기 때문입니다. , 하지만 툴바 형태로는 좋지 않기 때문에 쿼리 관련 정보를 Layout 프레임 북쪽 헤더에 작성합니다 --><br><!-- 여기서는 표시되는 스타일을 다음과 비슷하게 만들려고 합니다. 툴바 스타일이므로 먼저 툴바 스타일을 찾아 복사합니다.-><br><div data-options="region:'north',title:'Advanced Query'" style="height: 100px ; 배경: #F4F4F4;"><br>< ;form id="searchForm"><br><table><br><tr><br><th>사용자 이름: </th> ;<BR><td><br>< 입력 이름="이름" /></td><br></tr><br><tr><br><th>생성 시작 시간</일><br><td><br><input class="easyui-datetimebox" editable="false" name="subStartTime" /></td><br><! --날짜 상자 프레임의 데이터는 시간 형식이어야 하므로 Yes이므로 오류 방지를 위해 editable="false"를 사용하여 사용자가 수동으로 입력하는 것을 방지합니다. --><br><th>생성 종료 시간</th> ;<BR><td><br><input class="easyui-datetimebox" editable="false" name="nsubEndTimeame" /></td><br><td><수업 ="easyui-linkbutton" href="javascript:void(0 );" onclick="searchFunc();">찾기</a></td><br><td><a class=" easyui-linkbutton" href="javascript:void(0) ;" onclick="clearSearch();">지우기</a></td><br></tr><br></table> ;<BR></form><br> </div><br><div data-options="region:'center',split:false"><br><table id="dg "><br></table><br></div><br></div><br></div><br></div><br></p> </div> <p>Jquery 확장 코드: </p> <p></p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="23872" class="copybut" id="copybut23872" onclick="doCopy('code23872')"><u>코드 복사</u></a></span> 코드는 다음과 같습니다.</div> <div class="codebody" id="code23872"> <br>var sy = $.extend({} , sy) ;/*전역 변수 정의*/ <p>sy.serializeObject = function (form) { /*양식의 요소를 객체로 직렬화합니다. 이는 Jquery를 확장하는 메서드입니다.*/<br>var o = {};<br>$.each(form.serializeArray() , 함수(색인) {<br>if (o[this['name']]) {<br>o[this['name']] = o[this['name']] "," this[' value'];<br>} else {<br>o[this['name']] = this['value'];<br>}<br>});<br>return o;<br>} ;<br></p> </div> <p>이미지: </p> <p><img alt="" src="http://files.jb51.net/file_images/article/201304/20130408002.jpg"></p> <p> </p>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
