EasyUI项目中常用的做法

datagrid:

   var width = $(window).width()-20;   //减去10与body中margin:5px共同作用:为body留的边距  
    var height = $(window).height()-60;  
$(function(){
  $('#tt').datagrid({
pageSize:5,
width:width,
height:height,
pageList:[5,10,15,20],
url:'/View/DevelopmentManager/datagrid_data1.json',
loadMsg:'数据装载中......',
sortName:'code',
sortOrder:'desc',
remoteSort:true,
fitColumns: true,
pagination:true,
singleSelect:true,
columns:[[
{title:'编号',field:'ID',rowspan:2,width:100,align:'center',sortable:true},
{title:'应用名称',field:'ApplicationName',rowspan:2,width:100,align:'center',sortable:true},
{title:'应用类型',field:'appType',rowspan:2,width:100,align:'center',sortable:true},
{title:'申请人',field:'applicantName',rowspan:2,width:100,align:'center',sortable:true},
{title:'域名',field:'Domain',rowspan:2,width:100,align:'center',sortable:true},
{title:'',field:'id',rowspan:2,width:100,align:'center',formatter:formatProgress}
]],
rownumbers:true
  });
  $('#tt').datagrid('getPager').pagination({
displayMsg:'当前显示从{from}到{to}共{total}记录',
onBeforeRefresh:function(pageNumber, pageSize){
$(this).pagination('loading');
alert('pageNumber:'+pageNumber+',pageSize:'+pageSize);
$(this).pagination('loaded');
},
  });
 });

function formatProgress(value){
    if (value){
    var s ='<a href="javascript:void(0)" id="queryDetail" οnclick="queryDetail('+value+')" style="margin: 0px 10px;color: #003399;">查看</a>';
    return s;
    } else {
    return '';
    }
}

treegrid:

  var width = $(window).width()-20;   //减去10与body中margin:5px共同作用:为body留的边距  
var height = $(window).height()-60;  
$(function(){
  $('#tt').treegrid({
pageSize:5,
width:width,
height:height,
url:'/View/Depart/treegrid_data1.json',
loadMsg:'数据装载中......',
idField: 'id',
treeField: 'name',
        animate: true,
remoteSort:true,
fitColumns: true,
pagination:true,
singleSelect:true,
loadFilter: function (data) {
                $(data).each(function (i, item) {
                    if (item.children)
                        item.state = "closed";
                    else
                        item.state = "open";
                });
                return data;
         },
columns:[[
{title:'应用名称',field:'name',rowspan:2,width:100,sortable:true},
{title:'应用类型',field:'size',rowspan:2,width:100,sortable:true},
{title:'申请人',field:'data',rowspan:2,width:100,sortable:true}
]],
rownumbers:true
  });
 });

comboxtree:

checktree: