EasyUI 使用DataGrid并使用分页及复选框,支持格式化数据

来源:互联网 发布:js 圆形进度条 编辑:程序博客网 时间:2024/06/01 09:02

<div style="margin: 20px 0px 0px 0px">
   <table id="dg"  ></table>
  </div>

<script type="text/javascript">
    var appPath="<%=request.getContextPath()%>";
 function initdata(){
  $('#dg').datagrid({
   url:getXXX.action,

   pagination:true,//启动分页
   autoRowHeight : true,
   checkOnSelect : false,//为false,当用户仅在点击该复选框的时候才会呗选中或取消
   rownumbers:true,//显示行号
   columns:[[ //以下是定义列名
       {field:'id',title:'选择',checkbox:'true',width:'20%'},
             {field:'serialNumber',title:'终端串号',halign:'center',width:'20%'},
              {field:'mac',title:'MAC地址',halign:'center',width:'20%'},
              {field:'deviceType.prodName',title:'设备类型',halign:'center',width:'20%',
          formatter: function(value,row,index){//自定义显示数据,可显示object.object.obj...property  及判断值的不同显示不同内容
           if (row.deviceType.prodName){
            return row.deviceType.prodName;
           } else {
            return value;
           }
          }},    
             {field:'operate',title:'操作',halign:'center',width:'20%',
              formatter: function(value,row,index){
        if (row.id){
         var updateurl = "<a href=\"javascript:onAddClicked('"+row.id+"')\">" +
            "添加设备</a>";
         return updateurl;
        } else {
         return value;
        }
       }  
             }
         ]]
  });
 }
 function doSearch(value){//查询方法
  $('#dg').datagrid('load', {    //下面是key:value
   deviceserialNumber: $('#serialNumber').val(),
   deviceType:$('#deviceType').val(),
   devicemac:$('#devicemac').val()
  }); 


 }
 function onAddClicked(devId){
  var devGroupId = $('#deviceGroupid').val();
  var url = appPath+"/ssudevicegroup/addDeviceToGroup.action?deviceGroup.id="+devGroupId+"&device.id="+devId;
  addurl(url);
 }
 function addDeviceExMac(){
  var values = $('#dg').datagrid('getChecked');//获取所有被选中的行
  if(values.length < 1){
   JDialog.showMessage("请至少选择一条信息!");
   return false;
  }
  var arrayObj = new Array();
  $.each(values, function(index, item){//获取所有被选中的行中的某列或多列的值
   arrayObj.push("''"+item.id+"''");
   });
  var devGroupId = $('#deviceGroupid').val();
  var url = appPath+"/ssudevicegroup/addDeviceListToGroup.action?deviceGroup.id="+devGroupId+"&&devIds=" + arrayObj.join(",");
  addurl(url);
 }
 function addurl(url){
  $.getJSON(url,{},function(data){
   if(data){
    $('#dg').datagrid('reload'); 
    JDialog.showMessage("添加设备信息成功!");
   }else{
    $('#dg').datagrid('reload'); 
    JDialog.showError("添加设备信息失败!");
   }
  });
 }
 $(function(){初始化数据
  initdata();
 });

0 0