1

次のように作成された Web アプリケーションにテーブルがあります。

<table id="mygrid">
    <thead>
        <th>Col1</th>
        <th>Col2</th>
        <th>Col3</th>
    </thead>
</table>
<script type="text/javascript">
    $(document).ready(function() {
        window.oTable = $("#mygrid").dataTable({
            "bServerSide": true,
            "bSort": false,
            "sAjaxSource": "@Url.Action("MyFunction", "Events")",
            "fnServerParams": function(aoData) {
                aoData.push({ name: "arg1", value: "@Model.arg1" });
            },
            "aoColumns": [
                { "mDataProp": "Column1" },
                { "mDataProp": "Column2" },
                { "mDataProp": "Column3" }
            ],
            "bJQueryUI": true,
            "sPaginationType": "full_numbers",
            "bProcessing": false
        });

次のように、JSON の結果を返す関数を入力します。

ActionResult MyFunction(string arg1, ...)
{
    List<string> someList = ...;
    object array = eventsList.Select(str => new
    {
        Column1 = str + "1",
        Column2 = str + "2",
        Column3 = str + "3"
    });

    var result = new
    {
        sEcho = ...,
        iTotalRecords = ...,
        iTotalDisplayRecords = ...,
        aaData = array
    };

    return Json(result, JsonRequestBehavior.AllowGet);
}

テーブルを動的に生成したいので、設計時の列数がわかりません。例えば：

<table id="mygrid"><thead>
    @{
        foreach (string col in colNames)
            <th>@col</th>
    }
</thead></table>

同様の方法で表を埋めるために Javascript と C# コードを変更する方法を教えてください。出来ますか？"mDataProp"列を生成するように Javascript コードで行を生成できますが、C# コードで JSON の結果を作成するにはどうすればよいですか?

追加した：

コントローラーの問題を解決しました。私が発見したように、辞書のリストは匿名オブジェクトのリストとまったく同じ JSON にシリアル化されるため、次のように記述しました。

for (int i = 0; i < n; ++i)
{
    list.Add(new Dictionary<string, string>());
    foreach (int colName in colNames) events[i][colName] = cellValue;
}
var result = new 
{
    ...,
    aaData = list
};
return Json(result, JsonRequestBehavior.AllowGet);

今、私は新しい質問があります。HTML コードでタグを生成したように、C# ループを使用して "aoColumns" 配列を生成できません。私はこのように試しました：

"aoColumns": [
    @{
        for (int i = 0; i < n; ++i)
        {
            string colName = "Column" + i.ToString();
            { "mDataProp": "@colName" },
        }
    }
],

しかし、それは機能しません。どうすればいいですか？

4

2 に答える 2

1

DataTables では列を動的に変更することはできませんが、データの前に列を取得し、そのコールバック関数でデータテーブルをロードできます...

$.ajax('url/columns', function(data){

   //write table header

var options =   
"bProcessing": true, 
"bServerSide": true, 
"sAjaxSource": getGridDataUrl, 
"iDisplayLength": 10,
"aoColumns": //column settingssss
};
    $('#myDataTable').dataTable(options);

});
于 2013-03-18T16:46:39.700 に答える
0

問題を解決しました。JavaScript の生成は思ったより簡単です。問題は、aoColumns 配列を C# 文字列として生成し、それを次のように "aoColumns" プロパティに割り当てたときです。

"aoColumns": [
    @propertyStr
],

コンパイラはどういうわけか引用符と中括弧を隠しました。正しい方法はこれを行うことでした：

"aoColumns": [
    @Html.Raw(propertyStr)
],
于 2013-03-19T15:01:20.670 に答える