2016-04-06 98 views
0

如何添加工具提示到MVC webgrid中的一組特定值?此工具提示的目的是顯示位於後端數據庫中的動態價格。當用戶在第1行之後的第6列懸停在任何單元格上時,我想要顯示工具提示。我看過Bootstrap Tooltips,但我不確定要使用的選擇器。所需的列如下所示紅色:jQuery Webgrid中的動態工具提示

Desired Webgrid Cells for Tooltip

這裏是我的MVC的WebGrid代碼片段:

@grid.GetHtml(
    htmlAttributes: new { id="productSearchGrid" }, 
    mode:WebGridPagerModes.All, 
    tableStyle: "table table-hover table-bordered table-responsive", 
    columns: grid.Columns(
     grid.Column("ID", "Product ID", style: "span1", canSort: true), 
     grid.Column("ProductTypeDescription", "Product Type", style: "span2", canSort: true), 
     grid.Column("ProductName", "Product Name", style: "span2", canSort: true), 
     grid.Column("Price", "Current Price", format: (item) => String.Format("{0:C}", @item.Price), style: "span2", canSort: true), 
     grid.Column("EffectiveDate", "Effective Date", (format: (item) => (item.EffectiveDate != DateTime.MinValue && item.EffectiveDate 
      != null ? new HtmlString(
      item.EffectiveDate.ToString("yyyy-MM-dd") 
      ).ToString() : new HtmlString("---").ToString())), style: "span2", canSort: false), 
     grid.Column("TerminateDate", "Terminate Date", (format: (item) => (item.TerminateDate != DateTime.MinValue && item.TerminateDate 
      != null ? new HtmlString(
      item.TerminateDate.ToString("yyyy-MM-dd") 
      ).ToString() : new HtmlString("---").ToString())), style: "span2", canSort: false), 
     grid.Column("Select", format: (item) => 
      new HtmlString(
      Html.ActionLink("Select", "AddOrEditProduct", "Product", new 
       { 
        productID = item.ID 
       }, null).ToString() 
      ) 
     ) 
    ) 
) 

編輯:我要完成的任務非常相似here東西。

回答

0

在回顧了this SO回答後,我能夠弄清楚如何獲取工具提示以顯示特定列(不包括列標題)。這裏是我更新的代碼片段:

@grid.GetHtml(
    htmlAttributes: new { id="productSearchGrid" }, 
    mode:WebGridPagerModes.All, 
    tableStyle: "table table-hover table-bordered table-responsive", 
    columns: grid.Columns(
     grid.Column("ID", "Product ID", style: "span1", canSort: true), 
     grid.Column("ProductTypeDescription", "Product Type", style: "span2", canSort: true), 
     grid.Column("ProductName", "Product Name", style: "span2", canSort: true), 
     grid.Column("Price", "Current Price", format: (item) => String.Format("{0:C}", @item.Price), style: "span2", canSort: true), 
     grid.Column("EffectiveDate", "Effective Date", (format: (item) => (item.EffectiveDate != DateTime.MinValue && item.EffectiveDate 
      != null ? new HtmlString(
      item.EffectiveDate.ToString("yyyy-MM-dd") 
      ).ToString() : new HtmlString("---").ToString())), style: "span2", canSort: false), 
     grid.Column("TerminateDate", "Terminate Date", (format: (item) => (item.TerminateDate != DateTime.MinValue && item.TerminateDate 
      != null ? @Html.Raw(("<span id='' title='" + item.Price + "'>" + item.TerminateDate.ToString("yyyy-MM-dd") 
      ).ToString() + "</span>") : new HtmlString("---").ToString())), style: "span2", canSort: false), 
     grid.Column("Select", format: (item) => 
      new HtmlString(
      Html.ActionLink("Select", "AddOrEditProduct", "Product", new 
       { 
        productID = item.ID 
       }, null).ToString() 
      ) 
     ) 
    ) 
)