boottstrap table 은 x-editable 의 줄 셀 편집 및 데이터 Empty 와 다 중 스타일 문 제 를 해결 합 니 다.

머리말

최근 boottstrap table 표 의 셀 편집 기능 을 연구 하고 있 습 니 다.텍스트(text)방식 수정,드 롭 다운 선택(select)방식 수정,날짜(date)형식 수정 등 을 포함 하여 셀 을 클릭 하여 내용 을 수정 합 니 다

4.567917.본 고 는 x-editable 편집 데이터 의 동적 추가 와 디 스 플레이 데 이 터 를 Empty 로 하 는 문 제 를 해결 하 는 데 중심 을 두 고 표 셀 의 내용 에 여러 스타일 을 설정 하여 디 스 플레이 를 다양 하 게 한다4.567917.홈 페이지 에서 제공 하 는 demo 의 데 이 터 는 모두 html 파일 에 적 혀 있 기 때문에 select 유형의 동적 추가 가 불가능 합 니 다.(그래서 인터넷 의 대부분 은 홈 페이지 의 유사 한 예 입 니 다.본 블 로 그 는 이런 상황 에서 자신의 경험 으로 여러분 에 게 공유 하고 문제 가 있 으 면 댓 글 을 남 길 수 있 습 니 다)동적 으로 추가 하면 데 이 터 를 Empty 로 표시 합 니 다.제 표 는 원래 데이터 가 있 습 니 다.그러나 이 플러그 인 을 사용 하 자마자 데 이 터 를 Empty 로 만 들 었 습 니 다.이것 은 제 가 원 하 는 것 이 아니 기 때문에 필 자 는 스스로 이 문 제 를 해결 하 였 습 니 다.
인터넷 의 예 를 비교 하 다
예 를 들 어 다음 과 같은 데 이 터 는 Empty 의 예 가 아니 지만 html 에 죽은 데이터(awesome)를 썼 기 때문에 동적 추가 에 적합 하지 않 습 니 다.

<a href="#" rel="external nofollow" id="username" data-type="text" data-pk="1">awesome</a>
<script>
$(function(){
 $('#username').editable({
  url: '/post',
  title: 'Enter username'
 });
});
</script>

다른 하 나 는 boottstrap table 을 사용 하여 동적 으로 추 가 했 지만 select 형식 은 데이터 가 Empty 인 경우 가 발생 합 니 다.

$('#db_dependences').bootstrapTable({
  method:'POST',
  dataType:'json',
  contentType: "application/x-www-form-urlencoded",
  cache: false,
  striped: true,      //        
  sidePagination: "client",   //    ：client     ，server     （*）
  showColumns:true,
  pagination:true,
  minimumCountColumns:2,
  pageNumber:1,      //        ，     
  pageSize: 10,      //       （*）
  pageList: [10, 15, 20, 25],  //          （*）
  uniqueId: "id",      //        ，      
  showExport: true,     
  exportDataType: 'all',
  exportTypes:[ 'csv', 'txt', 'sql', 'doc', 'excel', 'xlsx', 'pdf'], //      
  onEditableSave: function (field, row, oldValue, $el) {
   $.ajax({
    success: function (data, status) {
     if (status == "success") {
      alert("    ");
     }
    },
    error: function () {
     alert("Error");
    },
    complete: function () {
    }
   });
  },
  data: [{
   id: 1,
   name: '  ',
   sex: ' ',
   time: '2017-08-09'
  }, {
   id: 2,
   name: '  ',
   sex: ' ',
   time: '2017-08-09'
  }, {
   id: 3,
   name: '  ',
   sex: ' ',
   time: '2017-08-09'
  }, {
   id: 4,
   name: '   ',
   sex: ' ',
   time: '2017-08-09'
  }, {
   id: 5,
   name: '  ',
   sex: ' ',
   time: '2017-08-09'
  }, {
   id: 6,
   name: '   ',
   sex: ' ',
   time: '2017-08-09'
  }],
  columns: [{
   field: 'id',
   title: '  '
  }, {
   field: 'name',
   title: '  ',
   editable: {
    type: 'text', 
    validate: function (value) { 
     if ($.trim(value) == '') { 
      return '      !'; 
     } 
    }
   } 
  }, {
   field: 'sex',
   title: '  ',
   editable: {
    type: 'select',
    pk: 1,
    source: [
     {value: 1, text: ' '},
     {value: 2, text: ' '},
    ]
   }
  }, {
   field: 'time',
   title: '  ',
   editable: {
    type: 'date',
    format: 'yyyy-mm-dd', 
    viewformat: 'yyyy-mm-dd', 
    datepicker: {
     weekStart: 1
    }
   } 
  }]
 });

결과 그림 은 다음 과 같다.

오픈 소스 로 인해 곧 원인 을 찾 을 수 있 습 니 다.formatter 는 이 function 으로 인해 호출 된 기본 formatter 를 쓰 지 않 았 기 때문에 기본적으로 표 의 값 을 html 에 전달 하지 않 았 습 니 다.boottstrap-table-editable.js 소스 코드 는 다음 과 같 습 니 다.초기 정의dont_edit_formatter 는 false 입 니 다.noeditFormatter 의 function 을 실현 하지 않 으 면 두 번 째 if 문 구 를 실행 합 니 다.탭 에 내용 에 대한 할당 이 없 기 때문에 마지막 으로 결 과 를 기본 Empty 로 표시 합 니 다.

column.formatter = function(value, row, index) {
    var result = column._formatter ? column._formatter(value, row, index) : value;
    $.each(column, processDataOptions);
    $.each(editableOptions, function(key, value) {
     editableDataMarkup.push(' ' + key + '="' + value + '"');
    });
    var _dont_edit_formatter = false;
    if (column.editable.hasOwnProperty('noeditFormatter')) {
     _dont_edit_formatter = column.editable.noeditFormatter(value, row, index);
    }
    if (_dont_edit_formatter === false) {
     return ['<a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" ',
      ' data-name="' + column.field + '"',
      ' data-pk="' + row[that.options.idField] + '"',
      ' data-value="' + result + '"',
      editableDataMarkup.join(''),
      '>' + '</a>'
     ].join('');
    } else {
     return _dont_edit_formatter;
    }
   };

여러 스타일 을 구현 하려 면 위의 코드 를 바 꾸 고 사용 할 때 noeditFormatter:function(value){...}을 실현 하면 됩 니 다.위의 코드 를 다음 과 같이 바 꿉 니 다.

column.formatter = function(value, row, index) {
    var result = column._formatter ? column._formatter(value, row, index) : value;
    $.each(column, processDataOptions);
    $.each(editableOptions, function(key, value) {
     editableDataMarkup.push(' ' + key + '="' + value + '"');
    });
    var _dont_edit_formatter = false;
    if (column.editable.hasOwnProperty('noeditFormatter')) {
     var process = column.editable.noeditFormatter(value, row, index);
     if(!process.hasOwnProperty('class')){
      process.class = '';
     }
     if(!process.hasOwnProperty('style')){
      process.style = '';
     }
     _dont_edit_formatter = ['<a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" ',
      ' data-name="'+process.filed+'"',
      ' data-pk="1"',
      ' data-value="' + process.value + '"',
      ' class="'+process.class+'" style="'+process.style+'"',
      '>' + process.value + '</a>'
     ].join('');
    }
    if (_dont_edit_formatter === false) {
     return ['<a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" ',
      ' data-name="' + column.field + '"',
      ' data-pk="' + row[that.options.idField] + '"',
      ' data-value="' + result + '"',
      editableDataMarkup.join(''),
      '>' + value + '</a>'
     ].join('');
    } else {
     return _dont_edit_formatter;
    }
   };

결 과 는 다음 과 같다.


그리고 boottstrap table 은 js 파일 을 사용 하여 noeditFormatter 함 수 를 실현 합 니 다.돌아 오 는 result 는 filed 와 value 를 포함해 야 합 니 다.class 와 style 은 필요 하지 않 습 니 다.class 는 다른 플러그 인 을 추가 로 사용 할 수 있 습 니 다.예 를 들 어 badge,style 은 스타일(배경,색상,글꼴 등)을 추가 할 수 있 습 니 다.

$('#db_dependences').bootstrapTable({
  method:'POST',
  dataType:'json',
  contentType: "application/x-www-form-urlencoded",
  cache: false,
  striped: true,        //        
  sidePagination: "client",   //    ：client     ，server     （*）
  showColumns:true,
  pagination:true,
  minimumCountColumns:2,
  pageNumber:1,      //        ，     
  pageSize: 10,      //       （*）
  pageList: [10, 15, 20, 25],  //          （*）
  uniqueId: "id",      //        ，      
  showExport: true,     
  exportDataType: 'all',
  exportTypes:[ 'csv', 'txt', 'sql', 'doc', 'excel', 'xlsx', 'pdf'], //      
  onEditableSave: function (field, row, oldValue, $el) {
   $.ajax({
    success: function (data, status) {
     if (status == "success") {
      alert("    ");
     }
    },
    error: function () {
     alert("Error");
    },
    complete: function () {
    }
   });
  },
//  onEditableHidden: function(field, row, $el, reason) { //            
//   if(reason === 'save') {
//    var $td = $el.closest('tr').children();
//   // $td.eq(-1).html((row.price*row.number).toFixed(2));
//   // $el.closest('tr').next().find('.editable').editable('show'); //          
//   } else if(reason === 'nochange') {
//    $el.closest('tr').next().find('.editable').editable('show');
//   }
//  },
  data: [{
   id: 1,
   name: '  ',
   sex: ' ',
   time: '2017-08-09'
  }, {
   id: 2,
   name: '  ',
   sex: ' ',
   time: '2017-08-09'
  }, {
   id: 3,
   name: '  ',
   sex: ' ',
   time: '2017-08-09'
  }, {
   id: 4,
   name: '   ',
   sex: ' ',
   time: '2017-08-09'
  }, {
   id: 5,
   name: '  ',
   sex: ' ',
   time: '2017-08-09'
  }, {
   id: 6,
   name: '   ',
   sex: ' ',
   time: '2017-08-09'
  }, {
   id: 7,
   name: '  ',
   sex: ' ',
   time: '2017-08-09'
  }, {
   id: 8,
   name: '   ',
   sex: ' ',
   time: '2017-08-09'
  }, {
   id: 9,
   name: '   ',
   sex: ' ',
   time: '2017-08-09'
  }, {
   id: 10,
   name: '  ',
   sex: ' ',
   time: '2017-08-09'
  }, {
   id: 11,
   name: '  ',
   sex: ' ',
   time: '2017-08-09'
  }],
  columns: [{
   field: 'id',
   title: '  '
  }, {
   field: 'name',
   title: '  ',
   editable: {
    type: 'text', 
    validate: function (value) { 
     if ($.trim(value) == '') { 
      return '      !'; 
     } 
    }
   } 
  }, {
   field: 'sex',
   title: '  ',
   editable: {
    type: 'select',
    pk: 1,
    source: [
     {value: 1, text: ' '},
     {value: 2, text: ' '},
    ],
    noeditFormatter: function (value,row,index) {
     var result={filed:"sex",value:value,class:"badge",style:"background:#333;padding:5px 10px;"};
     return result;
    }
   }
  }, {
   field: 'time',
   title: '  ',
   editable: {
    type: 'date',
    format: 'yyyy-mm-dd', 
    viewformat: 'yyyy-mm-dd', 
    datepicker: {
     weekStart: 1
    },
    noeditFormatter: function (value,row,index) {
     var result={filed:"time",value:value,class:"badge",style:"background:#333;padding:5px 10px;"};
     return result;
    }
   } 
  }]
 });

boottstrap table 내 보 내기 및 사용 에 대해 서 는 다른 블 로 그 를 볼 수 있 습 니 다.
다운로드 및 참조
x-editable 을 다운로드 하고 다음 과 같이 참조 합 니 다.

<link href="js/bootstrap_above/x-editable-develop/dist/bootstrap-editable/css/bootstrap-editable.css" rel="external nofollow" rel="stylesheet">
  <script src="js/bootstrap_above/x-editable-develop/dist/bootstrap-editable/js/bootstrap-editable.js"></script>
  <script src="js/bootstrap_above/bootstrap-table-develop/dist/extensions/editable/bootstrap-table-editable.js"></script>

그리고 항소 한 일부 파일 수정 추가 가 완료 되 었 습 니 다.
별 항목 결과 전시


그 중의 양식 은 모두 자체 적 으로 x-editable 을 바탕 으로 추 가 된 것 이다.설정 에 문제 가 생기 면 다음은 원본 링크 입 니 다.
원본 코드 다운로드
총결산
위 에서 말 한 것 은 소 편 이 소개 한 boottstrap table 실현 x-editable 의 줄 셀 편집 및 데이터 Empty 해결 과 다양한 스타일 지원 입 니 다.여러분 에 게 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 메 시 지 를 남 겨 주세요.소 편 은 제때에 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!