ExtJs懒人笔记(3) 动态Grid的实现

ExtJs学习目录

懒人笔记(1) ExtJs初探

ExtJs懒人笔记(2) ExtJs页面布局

ExtJs懒人笔记(3) 动态Grid的实现

引言

使用过.NET 服务端控件的童鞋都应该会对它的方便性记忆犹新，像GridView的使用是非常普遍的，它的好处我就不在多说了。GridVew控件是极其强大的，

我这里只想强调它的一个常见功能——动态列。我们唯一要做的就是为它绑定数据，而不用关心列数的变化，一切都是自适应的。

缘由

最近在使用Extjs制作页面，在使用ExrJs Grid控件时需要实现动态列的效果，也就是列名和数据都是从后台动态获取的。一个简单的功能到了客户端控件，

怎么就这样麻烦呢？在网上查了一番，可能是手气太差，没找到一个较为完整的实例。经过一番研究，自己也琢磨出了一个方法，我想可能是最笨的办法了，

仍然希望和大家分享以便能够得到高人的指点。

原理

对于初学Ext的童鞋来说，以下Grid的使用方法是大家最为熟悉的：

字段设置：

View Code

/// <summary>
/// 构造动态grid的数据
/// </summary>
/// <returns></returns>
public string GetJson1()
{
string strGridData = "";
//1.构造Grid字段
List<string> lstColumns = new List<string>();
lstColumns.Add("id");
lstColumns.Add("name");

string Coloumns = "";
Coloumns += "[";
for (int i = 0; i < lstColumns.Count;i++ )
{
Coloumns += "{\"name\":\"" + lstColumns[i] + "\"},";
}
Coloumns = Coloumns.Remove(Coloumns.LastIndexOf(','));//注意去掉最后一个多余的逗号
Coloumns += "]";

//2.构造Grid数据
string strResult = "";

strResult += "[";
for (int i = 0; i < 10; i++)
{
//strResult += "[\"" + i + "\",\"" + i + "\",\"" + i + "\",\"" + i + "\"],";

strResult += "{\"id\":\"" + i + "\",\"name\":\"" + i + "\"},";
}
strResult = strResult.Remove(strResult.LastIndexOf(','));//注意去掉最后一个多余的逗号
strResult += "]";

//3.构造header列名
//List<string> lstHeaders = new List<string>();
string strHeaders = "";
strHeaders = "[";
for (int j = 0; j < lstColumns.Count;j++ )
{
strHeaders += "{\"header\":\"" + lstColumns[j] + "\",\"dataIndex\":\"" + lstColumns[j] + "\"},";
}
strHeaders = strHeaders.Remove(strHeaders.LastIndexOf(','));//注意去掉最后一个多余的逗号
strHeaders += "]";

//4
strGridData = "{ ";
strGridData += "'metaData': {'totalProperty': 'total','root': 'records','id': 'id','fields':"+Coloumns+"}";
strGridData += ",";

strGridData += "'success': true,";
strGridData += " 'total': 50,";
strGridData += " 'records': "+strResult+",";
strGridData += "'columns':" + strHeaders + "";
strGridData += "} ";

return strGridData;
}

以上源码均有较为详尽的注释，不再说明。

交流

由于这里只是一个实例，实际的项目无法带出公司，但是项目中后台数据来自excel导入的到mongdb数据库，获取到的字符串中含有换行之类的，

影响了构成json,导致了Grid的无法正常呈现数据，同时，由于mongdb的一个集合中都可以存储不同的字段数目。这就导致此种方案失效，

有没有一种更加成熟和通用的方案呢？

转载请注明出处：/article/5949271.html