两个DataTable在一个页面 [英] Two Datatables in One Page

查看：756
本文介绍了两个DataTable在一个页面的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

您好我有一个部分在MVC 3，其中显示TABLE_1一两个DataTable在显示TABLE_2底部。我想有功能，当我双击数据表1（以行）将弹出数据表2 formAddNewRow。是否有任何可能的方式做到这一点？加上数据表1 ID将沿着以弹出形式发送。

Hi I have two datatables on one partial in MVC 3, One displaying Table_1 and one at the bottom displaying Table_2. I would like to have functionality that, when i double-clicked datatables 1(at row) it will popup Datatables 2 formAddNewRow. Is there any possible way to do this? plus the Datatables 1 ID will be sent along to the popup forms.

目前我的部分观点确实有这样的：

Currently my partial view do have this: 

<script type="text/javascript">
    $(document).ready(function () {
        $('#myItemPrice').dataTable({
            "bProcessing": true,
            "bServerSide": true,
            "sAjaxSource": '../AjaxItemPriceProvider?id=@ViewBag.ID',
            "sPaginationType": "full_numbers",
            "aoColumns": [
                                { "sName": "ID",
                                    "bSearchable": false,
                                    "bSortable": false,
                                    "bVisible": true
                                },
                                { "sName": "PDSID",
                                    "bSearchable": false,
                                    "bSortable": false,
                                    "bVisible": false
                                },
                                { "sName": "PID" },
                                { "sName": "EffDate" },
                                { "sName": "ExpDate" },
                                { "sName": "G140" },
                                { "sName": "AccID" },
                                { "sName": "CCID" }

                            ]
        });
    });

    $(document).ready(function () {
        $('#myTierPrice').dataTable({
            "bProcessing": true,
            "bServerSide": true,
            "sAjaxSource": '../AjaxTierPriceProvider?id=@ViewBag.ID',
            "sPaginationType": "full_numbers",
            "aoColumns": [
                                { "sName": "ID",
                                    "bSearchable": false,
                                    "bSortable": false,
                                    "bVisible": false
                                },
                                { "sName": "IPFID",
                                    "bSearchable": false,
                                    "bSortable": false,
                                    "bVisible": false
                                },
                                { "sName": "Quantity" },
                                { "sName": "Amount" },
                                { "sName": "Maximum Discount Percentage" },
                                { "sName": "Maximum Discount Amount" },
                                { "sName": "Tax 1" },
                                { "sName": "Tax 2" },
                                { "sName": "Commission" }

                            ]
        }).makeEditable({
            sUpdateURL: "../TierPriceUpdate",
            sAddURL: "../TierPriceAdd",
            sDeleteURL: "../TierPriceDelete"
        });
    });
</script>
<div class="clear">
</div>
<div id="itemPrice">
<h2>Item Pricing List</h2>
    <table id="myItemPrice" class="display">
        <thead>
            <th>
                ID
            </th>
            <th>
                PDSID
            </th>
            <th>
                PID
            </th>
            <th>
                Effective Date
            </th>
            <th>
                Expiry Date
            </th>
            <th>
                G140
            </th>
            <th>
                AccID
            </th>
            <th>
                CCID
            </th>
        </thead>
        <tbody>
        </tbody>
        <tfoot>
            <th>
                ID
            </th>
            <th>
                PDSID
            </th>
            <th>
                PID
            </th>
            <th>
                Effective Date
            </th>
            <th>
                Expiry Date
            </th>
            <th>
                G140
            </th>
            <th>
                AccID
            </th>
            <th>
                CCID
            </th>
        </tfoot>
    </table>
</div>
<div class="clear"></div><br />
    <div id="itemPrice">
    <h2>Item Tier Price List</h2>
    <table id="myTierPrice" class="display">
    <thead>
        <th>ID</th>
        <th>IPFID</th>
        <th>Quantity</th>
        <th>Amount</th>
        <th>Maximum Discount Percentage</th>
        <th>Maximum Discount Amount</th>
        <th>Tax 1</th>
        <th>Tax 2</th>
        <th>Commission</th>
    </thead>
    <tbody>
    </tbody>
    <tfoot>
        <th>ID</th>
        <th>IPFID</th>
        <th>Quantity</th>
        <th>Amount</th>
        <th>Maximum Discount Percentage</th>
        <th>Maximum Discount Amount</th>
        <th>Tax 1</th>
        <th>Tax 2</th>
        <th>Commission</th>
    </tfoot>
    </table>
    </div>
    <div>
    <button id="btnAddNewRow" value="Ok">
        Add New Tier Price</button>
    <button id="btnDeleteRow" value="cancel">
        Delete Tier Price</button>
    </div>
    <form id="formAddNewRow" action="#" title="New Tier Price Settings">
<input type="hidden" name="ID" id="ID" value="-1" rel="0" />
<label>
    Price ID</label><br />
<input type="text" name="IPFID" id="IPFID" rel="2" /><br />
<br />
<label>
    Quantity</label><br />
<input type="text" name="Qty" id="Qty" rel="2" /><br />
<br />
<label>
    Amount</label><br />
<input type="text" name="Amt" id="Amt" rel="3" /><br />
<font color="green">Leave empty to use default pricing</font><br />
<br />
<label>
    Maximum Discount Percent</label><br />
<input type="text" name="MaxDiscPct" id="MaxDiscPct" rel="4" /><br />
<br />
<label>
    Maximum Discount Amount</label><br />
<input type="text" name="MaxDiscAmt" id="MaxDiscAmt" rel="5" /><br />
<br />
<table style="border-style:none;">
<tr><td>
<label>
    Tax 1</label><br />
<input type="text" name="Tax1" id="Tax1" rel="6" style="width:90px;" /><br />
<br /></td>
<td>
<label>
    Tax 2</label><br />
<input type="text" name="Tax2" id="Tax2" rel="7"  style="width:90px;" /><br />
<br /></td>
</tr>
</table>
<label>
    Commission</label><br />
<input type="text" name="Comm" id="Comm" rel="7" /><br />
<br />
</form>

任何提示和引导将大大AP preciated。谢谢你。

Any tips and guide will be much appreciated. Thank you.

推荐答案

我花了几个小时（！）改写code你。
<一href=\"https://docs.google.com/viewer?a=v&pid=explorer&chrome=true&srcid=0B4inFc2_8uyKNDY0MWExNTEtNzk3My00ZmViLWI2ZTAtNjk5NDEwOWY0YTJj&hl=en_US\"相对=nofollow>您可以在这里下载

I spent a few hours(!) to rewrite the code for you. You can download it here


  • Windows 7中，64位

  • 在Visual Studio中开发2010 SP1

  • 使用ASP.NET MVC 4.0 3.0

  • 测试与Internet Explorer 9.0和Firefox 7.0.1

我有我的_Layout.cshtml的块中下面的链接和脚本。

I have the following link and scripts inside my block of _Layout.cshtml.

<head>
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery-ui.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
</head>

我添加了3个文件夹到项目：

I added 3 folders to the project:


  1. \\型号\\包含TierPrice.cs

  2. \\ SERVICES \\包含：FakeRepository1.cs和FakeRepository2.cs

  3. \\脚本\\包含jquery.dataTables.js及其相关文件数据表

我把其他的文件夹和文件，因为他们在新的ASP.NET MVC 3项目。

I left other folders and files as they were in the new ASP.NET MVC 3 project.

请注意：我注释掉.makeEditable（）方法（jquery.dataTables.editable插件），因为我从来没有与它的工作。

Note: I commented out .makeEditable() method (jquery.dataTables.editable plugin), cuz I've never worked with it.

一个简单的类重新present TierPrice。

A simple class to represent TierPrice.

public class TierPrice
{
    public int ID { get; set; }
    public int IPFID { get; set; }
    public int Qty { get; set; }
    public int Amt { get; set; }
    public int MaxDiscPct { get; set; }
    public int MaxDiscAmt { get; set; }
    public int Tax1 { get; set; }
    public int Tax2 { get; set; }
    public int Comm { get; set; }
}

假库

有两种不同的假库只是为了模仿两个不同的数据库。

Fake Repositories

Two different fake repositories just to mimic two different databases.

在该项目的唯一的控制器。没有什么很特别的地方。

The only controller in the project. Nothing very special about it.

指数法 

public ActionResult Index()
{
    ViewBag.ID = 1; // ID of table?
    return View();
}

AjaxItemPriceProvider 和 AjaxTierPriceProvider 是在视图中两个DataTable提供数据的两个JsonResult方法。

AjaxItemPriceProvider and AjaxTierPriceProvider are two JsonResult methods that provides data for two dataTables in the view.

    public JsonResult AjaxItemPriceProvider (int id)
    {
        /* =======================================
         Description of parameters

         * INPUT PARAMETERS:
         iDisplayLength: Number of rows in each page 
         iDisplayStart: The Number of the row that will be shown from it to iDisplayLength
         sSearch: Seach phrase
         iSortCol_0 (_n): Name of Sort field
         sSortDir_0 (_n): Direction of the sort

         * OUTPUT PARAMETERS:
         sEcho: Number of calling this method via dataTables-AJAX (1-base: in first call sEcho is 1)
         iTotalRecords: Number of total records
         iTotalDisplayRecords: 
         aaData: Return data in string array format
        * =======================================
        */

        string[][] ItemPriceRows = FakeRepository1.GetAllItemPrices(id);

        Dictionary<string, object> result = new Dictionary<string, object>();
        result.Add("sEcho", Request["sEcho"]);
        result.Add("iTotalRecords", ItemPriceRows.Length);
        result.Add("iTotalDisplayRecords", ItemPriceRows.Length);
        result.Add("aaData", ItemPriceRows);

        JsonResult json = Json(result, JsonRequestBehavior.AllowGet);
        return json;
    }

    public JsonResult AjaxTierPriceProvider (int id)
    {
        string[][] TierPriceRows = FakeRepository2.GetAllTierPrices(id);

        Dictionary<string, object> result = new Dictionary<string, object>();
        result.Add("sEcho", Request["sEcho"]);
        result.Add("iTotalRecords", TierPriceRows.Length);
        result.Add("iTotalDisplayRecords", TierPriceRows.Length);
        result.Add("aaData", TierPriceRows);

        JsonResult json = Json(result, JsonRequestBehavior.AllowGet);
        return json;
    }

请注意：ID（这是ViewBag.ID）被传递给这些方法和方法，把它传递给假库。但这个样本中的仓库其实并不关心他们，只是返回假数据。

Note: Id (which is ViewBag.ID) is passed to these methods and methods pass it to fake repositories. But in this sample the repositories actually do not care about them and just return fake data.

最后一个简单的方法来接受新的行（TierPrice），通过POST操作，当然：

Finally a simple method to accept new row (TierPrice), of course via POST action:

    [HttpPost]
    public String AjaxAddNewTierPrice(TierPrice newTierPrice)
    {
        // TierPrice calss is defined in Models\TierPrice.cs
        string addReult = FakeRepository2.AddTierPrice(newTierPrice);
        return addReult;
    }

查看

该视图可能看起来有点复杂，但其实并非如此。

View

The view may look a little complicated, but it's not.

讲究我如何描述数据表AJAX路径：<​​/ P>

Pay attention to how I describe AJAX path for dataTables:

"sAjaxSource": '@Url.Action("AjaxItemPriceProvider", new { id = ViewBag.ID })',

如果是，myItemPrice dataTable中，第一列的定义如下：

Then in myItemPrice dataTable, the first column is defined like:

{ "sName": "ID",
  "fnRender": function (oObj) { return renderAddNewRowLink(oObj); },
  "aTargets": [0],
  ...
},

和renderAddNewRowLink（）是那样简单：

and the renderAddNewRowLink() is as simple as:

function renderAddNewRowLink(obj) {
    var hyperlink = "<a href='javascript:void(0)' ";
    hyperlink += "onclick='showFormAddNewRow("
    hyperlink += obj.aData[0];
    hyperlink += ")'>";
    hyperlink += obj.aData[0];
    hyperlink += "</a>";
    return hyperlink;
}

请注意：oObj是dataTable的插件的容器对象。应当传递给renderAddNewRowLink（），所以该函数可以访问obj.aData数组，它包含从AJAX调用的内容

Note: oObj is the container Object of dataTable plugin. It should be passed to renderAddNewRowLink(), so the function can have access to obj.aData array which contains data from AJAX call.

确定。我们快到了。 showFormAddNewRow（）也非常简单和直接的。请看下图：

OK. We're almost there. showFormAddNewRow() is also very simple and straight forward. Take a look:

function showFormAddNewRow(id) {
    $('#divAddNewRow').show();
    $('#divCoverBg').show();
    $('#formAddNewRow #ID').val(id);
}

注意：$（'＃formAddNewRow #ID'）VAL（ID）是myItemPrice表通过ID来formAddNewRow形式的关键

Note: $('#formAddNewRow #ID').val(id) is the key of passing ID from myItemPrice table to formAddNewRow form.

如果你熟悉的 Ajax.BeginForm 的，其余是明确的，如果没有，这是一个很好的例子：<一href=\"http://stackoverflow.com/questions/5410055/using-ajax-beginform-with-asp-net-mvc-3-razor\">Using Ajax.BeginForm与ASP.NET MVC 3剃须刀

If you're familiar with Ajax.BeginForm, the rest is clear, if not, this is a good example: Using Ajax.BeginForm with ASP.NET MVC 3 Razor

注：以下功能力myTierPrice DataTable添加到（通过调用AjaxTierPriceProvider）添加一个新TierPrice之后每次刷新自身

Note: The following function forces myTierPrice dataTable to refresh itself (by calling AjaxTierPriceProvider) each time after a new TierPrice is added.

function addNewTierPriceCompleted(obj) {
    TierPriceTable.fnDraw();
}

我还添加了2款中的site.css。添加新行的过程中需要这些样式。

I've also added 2 styles in site.css. The process of adding a new row needs those styles.

这篇关于两个DataTable在一个页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
ASP .NET最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆