layui中數據表格,刪除,修改,獲取選中行數據進行處理

<table id="demo" lay-filter="test" class="layui-table">
</table>
var data = [[${times.data}]];
var count = [[${times.count}]]; 
layui.use('table', function(){
  var table = layui.table;
  table.render({
  toolbar: '#toolbarDemo' //開啓頭部工具欄,併爲其綁定左側模板
    ,elem: '#demo'//table的id
    ,data: data
    ,cols: [[
      {type: 'checkbox', fixed: 'left'}
      ,{type: 'numbers', title: '編號',fixed: 'left'}
      ,{field:'id', title:'ID', fixed: 'left', hide: true}
      ,{field:'dataDate', title:'時間'}
      ,{field:'dataType', title:'數據類型'}
      ,{field:'dataFlg', title:'免考覈類型', templet:'#flg'}
      ,{field:'startDate01', title:'開始時間'}
      ,{field:'endDate01', title:'結束時間'}
      ,{field:'startDate', title:'開始日期'}
      ,{field:'endDate', title:'結束日期'}
      ,{field:'startTime', title:'開始時間'}
      ,{field:'endTime', title:'結束時間'}
      ,{field:'farmIds', title:'場站id'}
     ,{title:'操作',align:'center', toolbar: '#barDemo',width:150}
    ]]
  ,limit:count
  ,height:'full-150'
  ,page: false
 });
 
//templet 對免考覈類型數據進行處理
<script type="text/html" id="flg">
  {{#  if(d.dataFlg == 0){ }}
      時間段
  {{#  } else { }}
     每日某段時間
  {{#  } }}
</script>
<script type="text/html" id="toolbarDemo">
  <div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm" lay-event="getCheckData">
    	獲取選中行數據並複製
    </button>
  </div>
</script>

<script id="barDemo" type="text/html">
  <a class="layui-btn layui-btn-xs" lay-event="edit">編輯</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">刪除</a>
</script>
table.on('toolbar(test)', function(obj){// test爲lay-filter
     var checkStatus = table.checkStatus(obj.config.id);//選中行
     switch(obj.event){
       case 'getCheckData': //getCheckData爲lay-event
         var data = checkStatus.data;
         //一些彈出層
         var form = layui.form;
   layer.open({
    type : 1,
    title : "複製選中數據",
    closeBtn : 0,
    area : [ '40%', '40%' ],
    anim : 5,
    shadeClose : false,
    closeBtn : 1,
    content : $("#addCopyOne"),
    skin : 'layui-layer-dialog-open',
    success : function(layero, index) {
     form.render();
    },
    cancel : function(index, layero) {
      layer.close(index);
     return false;
    },
    end : function() {
     $("#addCopyOne").css("display", "none");
    }
   })
   //保存數據
   $('#addCopy').on('click', function() {
    var type = $('#dataTypeCopy').find("option:selected").val();
    saveCopyData(data,type);
   })
       break;
     };
   });
   
   //監聽行工具事件
   table.on('tool(test)', function(obj){
     var data = obj.data;
     if(obj.event === 'del'){
      deleteData(data.id)
     } else if(obj.event === 'edit'){
      editData(data.id)
     }
   });
後臺把String數據轉換爲list
List<RfzfwMkTime> times = JSON.parseArray(vos, RfzfwMkTime.class);
var url = basePath + "/getSelectDataCopy";
function saveCopyData(data,type){
 var vos = JSON.stringify(data);//需要把數據表格選中行數據轉換一下
 $.ajax({
 	type : "POST",
  	url : url,
	data : {vos:vos,type:type},//轉化爲json字符串
  	success : function(data) {
	   if ($.trim(data) == "true") {
	   	layer.msg('複製成功', {icon : 1  });
    	        window.setTimeout("javascript:location.href='/noCheck'",2000);		
   	   } else {
    		layer.msg('數據已存在', {icon : 2});
	   }
	},
	error : function(data) {
  	     layer.msg('操作失敗,請填入數據', { icon : 2 });
        }
 })
 }
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章