如何使用 json 和 sql 将数据导入 EXTJS 网格面板

Posted 2023-02-26

【中文标题】如何使用 json 和 sql 将数据导入 EXTJS 网格面板

【英文标题】：How to get data into an EXTJS Grid Panel using json and sql

【发布时间】：2012-09-24 15:41:26

【问题描述】：

我正在尝试在 extjs 中显示网格视图。该数据是从 sql db 收集的。我有一个查询要从 GridViewController() 中的 sql db 获取数据，但我不确定如何将这些数据保存在数组中，然后将其编码为 JSON 并将数据发回。

我的网格视图控制器

public string writeRecord()
    

        Response.Write("Survey Completed!");
        SqlConnection conn = DBTools.GetDBConnection("ApplicationServices2");


        string sqlquery = "SELECT Q1, Q2, Q3, Q4, Improvements, Comments FROM myTable";
        SqlDataAdapter cmd = new SqlDataAdapter(sqlquery, conn);

        DataSet myData = new DataSet();
        cmd.Fill(myData, "myTable");

        javascriptSerializer jss = new JavaScriptSerializer();
        string json = jss.Serialize(myData);

        conn.Open();
        conn.Close();
        return "rows: '+ json +'";

     

这是我的 gridviewApp.js。这是我创建 gridview 并尝试从我的 gridviewController 取回数据的地方。

var store = Ext.create('Ext.data.JsonStore', 


        storeId: 'myData',
        reader: new Ext.data.JsonReader(
            fields:[
             name: 'Q1', type: 'int' ,
             name: 'Q2', type: 'int' ,
             name: 'Q3', type: 'int' ,
             name: 'Q4', type: 'int' ,
             name: 'Q5', type: 'int' ,
             name: 'Improvements', type: 'string' ,
             name: 'Comments', type: 'string']
            ),

            proxy: 
            type: 'json',
            url: 'GridView/writeRecord'
            

    );  
    this.grid = Ext.create('Ext.grid.Panel', 
        title: 'GridView App',
        url: 'GridView/writeRecord',
        //store: store,
        store: Ext.data.StoreManager.lookup('myData'),
        columns: [
        header: 'Q1', width: 100,
        sortable: true, dataIndex: 'Q1',
         header: 'Q2', width: 100,
            sortable: true, dataIndex: 'Q2'
        ,
         header: 'Q3', width: 100,
            sortable: true, dataIndex: 'Q3'
        ,
         header: 'Q4', width: 100,
            sortable: true, dataIndex: 'Q4'
        ,
         header: 'Improvements', width: 200,
            sortable: true, dataIndex: 'Improvements'
        ,
         header: 'Comments', width: 200,
            sortable: true, dataIndex: 'Comments'
        
    ],
        stripeRows: true,
        //height:250,
        width: 800,
        renderTo: Ext.getBody()
    );

任何形式的建议或意见都将受到高度赞赏......谢谢

更新家伙：

我收到此错误 序列化“System.Globalization.CultureInfo”类型的对象时检测到循环引用。

当我使用时

return Json(myData, JsonRequestBehavior.AllowGet);

但是当我使用时，我可以从我的数据库中获得结果

myData.GetXml();

这是另一个棘手的部分。 我只能使用像

这样的直接路径访问我的数据库结果

http://localhost:55099/GridView/writeRecord

但我的 gridView.js 仍然显示空白...有什么见解吗？

【参考方案1】：

我会像这样使用 MVC 的内置 Json 功能：

    public ActionResult ActionName()
    

        DataSet ds = new DataSet();

        // populate ds

        return Json(ds, JsonRequestBehavior.AllowGet);

    

这将确保您的 Json 以正确的格式输出。

编辑

你的函数应该是这样的：

    public ActionResult writeRecord()
    

        Response.Write("Survey Completed!");
        SqlConnection conn = DBTools.GetDBConnection("ApplicationServices2");


        string sqlquery = "SELECT Q1, Q2, Q3, Q4, Improvements, Comments FROM myTable";
        SqlDataAdapter cmd = new SqlDataAdapter(sqlquery, conn);

        DataSet myData = new DataSet();
        cmd.Fill(myData, "myTable");


        conn.Open();
        conn.Close();

        return Json(myData, JsonRequestBehaviour.AllowGet);

     

【讨论】：

感谢您的输入 doug... 在尝试将其实现到我的 writeRecord()... 而不是将 rows: '+ json +' 返回到 return Json(myData, JsonRequestBehavior.允许获取）；但我收到错误消息'无法将类型 system.web.mvc.jsonresult 隐式转换为字符串。

那是因为你的 writeRecord() 函数的返回类型是 'string' 你想返回一个 ActionResult 或 JsonResult。

sweet...谢谢您解决了这个错误...但现在我的 gridview 什么也没显示...

Json 返回时是什么样子的？您需要确保它采用您的商店能够理解的格式

道格，我的萤火虫没有任何 Json 选项，我可以在其中找到 json 结果。我打电话给控制器对吗？