코드 복사 코드는 다음과 같습니다. var editFlag = undefine;//편집 플래그 설정<br>//레이아웃 프레임은 href를 가리키므로 fetch html 페이지 본문의 중간 부분이므로 페이지를 이렇게 작성할 수 있습니다 <br>//Datagrid에는 많은 속성이 포함되어 있으므로 js를 사용하여 Datagrid 프레임워크를 초기화해 보세요. <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, //하단 페이징 도구 표시 Column<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> 열: [[<br>{<br>필드: '코드', 제목: '코드', 너비: 100,<br>편집기: {//편집 가능으로 설정<br>유형: 'validatebox',// 편집 스타일을 설정합니다. 내장 스타일은 text, textarea, checkbox, numberbox, verifybox, datebox, 콤보 상자, 콤보 트리이며 직접 확장할 수 있습니다. <br>옵션: {}<br>}<br>},<br>{<br>field: 'name', title: 'Name', width: 100, sortable: true,<br>editor: {//편집 가능으로 설정<br>type: 'validatebox',// 설정 편집 형식<br>옵션: {<br>필수: true//편집 규칙 속성 설정<br>}<br>}<br>},//sortable:true 열을 클릭하면 오름차순 및 내림차순<br>{<br>field: 'addr', title: 'addr', width: 100,<br>editor: {//편집 가능으로 설정<br>type: 'datetimebox',//여기서 datetimebox 확장을 만듭니다 <br>옵션: {<br>필수: true//편집 규칙 속성 설정 <br>}<br>}<br>}<br>]],//두 개가 있는 이유 자세한 내용은 데모<br>도구 모음: [{//날짜 그리드 양식의 머리에 버튼 추가<br>text: "추가"를 참조하세요. <br>iconCls: "icon-add", <br>핸들러: 함수 () {<br>if (editFlag != 정의되지 않음) {<br>$("#dg").datagrid('endEdit', editFlag) ;//편집을 종료하고 이전에 편집한 행을 전달<br>}<br>if (editFlag == undefine) {//추가된 너무 많은 행이 동시에 열리는 것을 방지<br>$("#dg" ).datagrid('insertRow', {//지정된 행에 데이터 추가 ,appendRow는 마지막 행에 데이터를 추가합니다. <br>index: 0, // 행 수는 0부터 시작합니다. <br>row: {<br> code: '',<br>name: '이름을 입력하세요',<br>addr: ''<br>}<br>});<br>$("#dg").datagrid('beginEdit' , 0);//편집을 활성화하고 편집할 줄을 전달합니다<br>editFlag = 0;<br>}<br>}<br>}, '-', {//'-'는 두 버튼 사이에 수직선을 사용하여 구분하기 편해 보입니다<br>text: "Delete" ,<br>iconCls: "icon-remove",<br>handler: function () {<br>//행 선택 삭제 예정<br>varrows = $("#dg").datagrid('getSelections' ;", function (res) {//삭제 여부 확인 <br>if (res) {<br>varcodes = {};<br>for (var i = 0; i <rows.length; i ) { <BR>codes.push(rows[i].code);<BR>}<BR>console.info(codes.join(','));//문자열을 연결하고 데이터 처리를 위해 백그라운드로 전달합니다. , 루프에서 삭제하고 성공 후 DataGrid를 새로 고칩니다.<BR>}<BR>});<BR>}<BR>}<BR>}, '-', {<BR>text: "Modify", <BR>iconCls: "icon-edit ",<BR>handler: function () {<BR>//편집할 행 선택<BR>varrows = $("#dg").datagrid('getSelections') ;<BR>if (rows.length = = 1) {//행이 선택되면 이벤트가 트리거됩니다<BR>if (editFlag != undefine) {<BR>$("#dg").datagrid(' endEdit', editFlag);//편집된 행을 전달하기 전에 편집 종료<BR>}<BR>if (editFlag == undefine) {<BR>var index = $("#dg").datagrid('getRowIndex' ,rows[0]);//선택한 행 Index 가져오기<BR>$("#dg").datagrid('beginEdit', index);//편집을 활성화하고 편집할 줄에 전달<BR>editFlag = index;<BR>}<BR>}<BR>}<BR>}, '-', {<BR>text: "save",<BR>iconCls: "icon-save",<BR>handler: function () {<BR>$("#dg" ).datagrid('endEdit', editFlag);<BR>}<BR>}, '-', {<BR>text: "Undo",<BR> iconCls: "icon-redo",<BR>핸들러: 함수 () {<BR>editFlag = 정의되지 않음;<BR>$("#dg").datagrid('rejectChanges');<BR>}<BR>} , '-'],<BR>onAfterEdit: function ( rowIndex, rowData,changes) {//endEdit 추가 후 <BR>console.info(rowData) 저장 시 트리거;//백그라운드로 전달된 데이터를 볼 수 있습니다. Firefox 브라우저 콘솔에서 이 데이터를 사용하여 배경에 비동기식으로 추가할 수 있습니다. 추가가 완료된 후 datagrid<BR>editFlag = undefed;//Reset<BR>}, onDblClickCell: 함수(rowIndex, 필드, 값) {//내용을 수정하려면 행을 두 번 클릭하세요<BR>if (editFlag != undefine) {<BR>$("#dg").datagrid('endEdit', editFlag);//End 편집, 이전에 편집한 줄 전달<BR>}<BR>if (editFlag == undefine) {<BR>$("#dg").datagrid('beginEdit', rowIndex);//편집 활성화 및 전달 편집할 행 <BR>editFlag = rowIndex;<BR>}<BR> }<BR>});<BR>});</P> <P>//이벤트를 트리거하려면 검색 버튼을 클릭하세요<BR>function searchFunc() {<BR>alert("123");<BR>$("#dg").datagrid("load", sy. serializeObject($ ("#searchForm").form()));//searchForm 양식의 요소 시퀀스를 객체로 배경으로 전송<BR>//여기서 다시 로드 사용을 소개합니다. 기본적으로 현재 페이지가 기억되며, 쿼리를 클릭하면 3개의 데이터만 찾으면 각 페이지에 10개의 데이터가 표시되고 현재 페이지 번호는 2이므로 결과를 볼 수 없습니다. 현재 페이지에서 쿼리를 실행하면 페이지 앞으로만 이동할 수 있지만 로드 중에는 이런 일이 발생하지 않습니다.<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> </div> <br> <p>확장 편집기 방법: datetimebox</p> <p></p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="5698" class="copybut" id="copybut5698" onclick="doCopy('code5698')"><u>코드 복사</u></a></span> 코드는 다음과 같습니다.</div> <div class="codebody" id="code5698"> <br>$(function () {<br> /*확장 편집자의 datetimebox 메소드*/<br>$.extend($.fn.datagrid.defaults.editors, {<br>datetimebox: {//메소드 이름 지정<br>init: function(container, options) { <br>var editor = $('<input />').appendTo(container);<br>options.editable = false;//수동으로 입력할 수 없도록 설정하세요. <br>editor.datetimebox(options); <br> return editor;<br>},<br>getValue: 함수(대상) {//값 가져오기<br>return $(target).datetimebox('getValue');<br>},<br>setValue : 함수( 대상, 값) {//값 설정<br>$(target).datetimebox('setValue', value);<br>},<br>resize: 함수(대상, 너비) {<br>$ (대상) .datetimebox('resize', width);<br>},<br>destroy: function (target) {<br>$(target).datetimebox('destroy');//생성된 패널 제거<br>} <br>}<br>});<br>});<br> </div> <p><strong>아이콘: </strong></p> <p><img alt="" src="http://files.jb51.net/file_images/article/201304/20130408001.jpg"></p> <p> </p>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
