easyUI自定义datagrid的列显示_easyui datagrid 自定义列-优快云博客

本文详细介绍了如何使用JavaScript获取datagrid的所有列，并通过一个实例展示了如何配置datagrid列的展示方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、获取显示datagrid的所有列

function configGrid(grid,startIndex)
{
      
       var columns=grid.datagrid('options' ).columns[0];
       //return;
       var jsonStr="[" ;
      $.each(columns, function(i,col){
            
             if(startIndex)
            {
                   if(i>=startIndex)
                  {
                        jsonStr+= '{"field":"'+col.field+'","title":"' +col.title+'","hidden":'+(col.hidden== true)+'},' ;
                  }
            }
             else
            {
                  jsonStr+= '{"field":"'+col.field+'","title":"' +col.title+'","hidden":'+(col.hidden== true)+'},' ;
            }
      });
       //grid.datagrid('hideColumn',[4].field);
       if(jsonStr.length>1)
      {
            jsonStr=jsonStr.substring(0, jsonStr.length -1);
      }
      jsonStr+= "]";
      $( "#MyPopWindow").window({
            title: '设置',
            href: "../common/gridConfig.jsp?columnStr=" +jsonStr,
            width:400,
            height:200,
            onLoad: function(){
                  
            },
            onClose: function()
            {
                   var cks=getConfiged();
                   var ckobj=null;
                  $.each(cks, function(i,ck){
                        ckobj=$(ck);
                         if(ckobj.attr("checked" )=="checked")
                        {
                              grid.datagrid( "showColumn",ckobj.val());
                        }
                         else
                        {
                              grid.datagrid( "hideColumn",ckobj.val());
                        }
                  });
            }
      });
}

2、配置datagrid列的jsp——gridConfig.jsp?

<html>
<head>
<%@ include file="/jsp/common/common.jsp"%>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title> easyUI DataGrid Config </title>
<script type="text/javascript" >
$(function($){
      initConfig();
});
function initConfig()
{
       //alert('${param.columnStr}');
       var columns=eval('${param.columnStr}' );
       var nodeText="<table></table>" ;
       var table=$(nodeText);
       var tr=null ;
       var td=null ;
      $.each(columns, function(i,col){
             if(i%4==0)
            {
                   if(i>0)
                  {
                        table.append(tr);
                  }
                  tr=$( "<tr></tr>");
            }
            nodeText= "<td width='100px'><input type='checkbox' value='"+col.field+"' "+(col.hidden== false?"checked" :"" )+">" ;
            nodeText+=col.title+ "</input>";
            td=$(nodeText);
            tr.append(td);
      });
       if(columns.length%4!=0)
      {
            table.append(tr);
      }
      $( '#config').append(table);
}

function getConfiged()
{
       var checks=$('#config' ).children('table').first().find( 'input');
       return checks;
}


</script>
</head>
<body>
       <div style="width :100%;height: 100%;" >
             <div id= "config"></div >
             <div style='margin-left : 150px;margin-bottom: 5px;vertical-align : bottom;position: absolute;bottom : 5px;'>
                   <a href="javascript:void(0);" id="btn-ok" onclick="$('#MyPopWindow').window('close');" class ="easyui-linkbutton" iconCls="icon-ok" >确定</ a>
             </div>
       </div>
</body>
</html>