DataGrid Framework_jquery 삭제, 추가 및 수정

코드 복사 코드는 다음과 같습니다. var editFlag = undefine;//편집 플래그 설정 //레이아웃 프레임은 href를 가리키므로 fetch html 페이지 본문의 중간 부분이므로 페이지를 이렇게 작성할 수 있습니다 //Datagrid에는 많은 속성이 포함되어 있으므로 js를 사용하여 Datagrid 프레임워크를 초기화해 보세요. $(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, //하단 페이징 도구 표시 Column rownumbers: true, //행 번호 1, 2, 3, 4 표시 ... pageSize: 10, //페이징 항목 개수, 즉 백그라운드로 데이터를 읽을 때 전달되는 값을 읽습니다. pageList: [10, 20, 30], //조정할 수 있습니다. 각 페이지에 표시되는 데이터, 즉 백그라운드에서 데이터를 요청할 때마다 pageSize 데이터를 조정합니다 //데이터그리드에 속성이 너무 많기 때문에 매번 변경하지는 않겠습니다. 모두 도입하고 필요한 경우 할 수 있습니다. API 참조 sortName: "name", //테이블 초기화 시 기준으로 하는 정렬 필드는 데이터베이스의 필드 이름과 동일해야 합니다 sortOrder: "asc", / /정상 순서 열: [[ { 필드: '코드', 제목: '코드', 너비: 100, 편집기: {//편집 가능으로 설정 유형: 'validatebox',// 편집 스타일을 설정합니다. 내장 스타일은 text, textarea, checkbox, numberbox, verifybox, datebox, 콤보 상자, 콤보 트리이며 직접 확장할 수 있습니다. 옵션: {} } }, { field: 'name', title: 'Name', width: 100, sortable: true, editor: {//편집 가능으로 설정 type: 'validatebox',// 설정 편집 형식 옵션: { 필수: true//편집 규칙 속성 설정 } } },//sortable:true 열을 클릭하면 오름차순 및 내림차순 { field: 'addr', title: 'addr', width: 100, editor: {//편집 가능으로 설정 type: 'datetimebox',//여기서 datetimebox 확장을 만듭니다 옵션: { 필수: true//편집 규칙 속성 설정 } } } ]],//두 개가 있는 이유 자세한 내용은 데모 도구 모음: [{//날짜 그리드 양식의 머리에 버튼 추가 text: "추가"를 참조하세요. iconCls: "icon-add", 핸들러: 함수 () { if (editFlag != 정의되지 않음) { $("#dg").datagrid('endEdit', editFlag) ;//편집을 종료하고 이전에 편집한 행을 전달 } if (editFlag == undefine) {//추가된 너무 많은 행이 동시에 열리는 것을 방지 $("#dg" ).datagrid('insertRow', {//지정된 행에 데이터 추가 ,appendRow는 마지막 행에 데이터를 추가합니다. index: 0, // 행 수는 0부터 시작합니다. row: { code: '', name: '이름을 입력하세요', addr: '' } }); $("#dg").datagrid('beginEdit' , 0);//편집을 활성화하고 편집할 줄을 전달합니다 editFlag = 0; } } }, '-', {//'-'는 두 버튼 사이에 수직선을 사용하여 구분하기 편해 보입니다 text: "Delete" , iconCls: "icon-remove", handler: function () { //행 선택 삭제 예정 varrows = $("#dg").datagrid('getSelections' ;", function (res) {//삭제 여부 확인 if (res) { varcodes = {}; for (var i = 0; i codes.push(rows[i].code); } console.info(codes.join(','));//문자열을 연결하고 데이터 처리를 위해 백그라운드로 전달합니다. , 루프에서 삭제하고 성공 후 DataGrid를 새로 고칩니다. } }); } } }, '-', { text: "Modify", iconCls: "icon-edit ", handler: function () { //편집할 행 선택 varrows = $("#dg").datagrid('getSelections') ; if (rows.length = = 1) {//행이 선택되면 이벤트가 트리거됩니다 if (editFlag != undefine) { $("#dg").datagrid(' endEdit', editFlag);//편집된 행을 전달하기 전에 편집 종료 } if (editFlag == undefine) { var index = $("#dg").datagrid('getRowIndex' ,rows[0]);//선택한 행 Index 가져오기 $("#dg").datagrid('beginEdit', index);//편집을 활성화하고 편집할 줄에 전달 editFlag = index; } } } }, '-', { text: "save", iconCls: "icon-save", handler: function () { $("#dg" ).datagrid('endEdit', editFlag); } }, '-', { text: "Undo", iconCls: "icon-redo", 핸들러: 함수 () { editFlag = 정의되지 않음; $("#dg").datagrid('rejectChanges'); } } , '-'], onAfterEdit: function ( rowIndex, rowData,changes) {//endEdit 추가 후 console.info(rowData) 저장 시 트리거;//백그라운드로 전달된 데이터를 볼 수 있습니다. Firefox 브라우저 콘솔에서 이 데이터를 사용하여 배경에 비동기식으로 추가할 수 있습니다. 추가가 완료된 후 datagrid editFlag = undefed;//Reset }, onDblClickCell: 함수(rowIndex, 필드, 값) {//내용을 수정하려면 행을 두 번 클릭하세요 if (editFlag != undefine) { $("#dg").datagrid('endEdit', editFlag);//End 편집, 이전에 편집한 줄 전달 } if (editFlag == undefine) { $("#dg").datagrid('beginEdit', rowIndex);//편집 활성화 및 전달 편집할 행 editFlag = rowIndex; } } }); });

//이벤트를 트리거하려면 검색 버튼을 클릭하세요 function searchFunc() { alert("123"); $("#dg").datagrid("load", sy. serializeObject($ ("#searchForm").form()));//searchForm 양식의 요소 시퀀스를 객체로 배경으로 전송 //여기서 다시 로드 사용을 소개합니다. 기본적으로 현재 페이지가 기억되며, 쿼리를 클릭하면 3개의 데이터만 찾으면 각 페이지에 10개의 데이터가 표시되고 현재 페이지 번호는 2이므로 결과를 볼 수 없습니다. 현재 페이지에서 쿼리를 실행하면 페이지 앞으로만 이동할 수 있지만 로드 중에는 이런 일이 발생하지 않습니다. }

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

코드 복사 코드는 다음과 같습니다. $(function () { /*확장 편집자의 datetimebox 메소드*/ $.extend($.fn.datagrid.defaults.editors, { datetimebox: {//메소드 이름 지정 init: function(container, options) { var editor = $(' ').appendTo(container); options.editable = false;//수동으로 입력할 수 없도록 설정하세요. editor.datetimebox(options); return editor; }, getValue: 함수(대상) {//값 가져오기 return $(target).datetimebox('getValue'); }, setValue : 함수( 대상, 값) {//값 설정 $(target).datetimebox('setValue', value); }, resize: 함수(대상, 너비) { $ (대상) .datetimebox('resize', width); }, destroy: function (target) { $(target).datetimebox('destroy');//생성된 패널 제거 } } }); }); 아이콘: