In asp.net, the displayed prompt is displayed when the cursor moves the GridView data. asp. netgridview

In asp.net, the displayed prompt is displayed when the cursor moves the GridView data. asp. netgridview

Question:

In asp.net development, if there is such a requirement, if the list control, such as a column in the GridView, shows a value obtained by a calculation formula, then the demand comes, how do I move the mouse over the number to display the formula and process of the number?

Solution Analysis:

Generally, you can use the title attribute of the control to display the prompt information, but the display style is not beautiful. Next, we can use this solution, as shown in the following figure:

Detailed implementation steps:
1, download the pop-up prompt box related js file package,: http://download.csdn.net/detail/taomanman/9083213

2. decompress the downloaded file and put the entire popTips folder in your project directory, for example, under the js folder.

3. Introduce related files on the page you need. The most important file is the following:

<link href="../Js/popTips/tip-yellow/tip-yellow.css" rel="stylesheet" /> <script src="../Js/jquery-1.7.2.min.js"></script> <script src="../Js/popTips/jquery.poshytip.min.js"></script> 

4. If you use the GridView on the page, you can use the template column as follows:

<Asp: gridView ID = "GridView1" OnRowDataBound = "inline" AllowPaging = "True" runat = "server" AutoGenerateColumns = "False" OnPageIndexChanging = "inline" CellPadding = "4" CssClass = "grid1 "EmptyDataText =" "PageSize =" 10 "Width =" 99% "HeaderStyle-Wrap =" True "> <HeaderStyle BackColor =" #507CD1 "Font-Bold =" True" foreColor = "White"/> <Columns>... <asp: TemplateField HeaderText = "标 <br> (kg standard coal) "ItemStyle-Width =" 100px "HeaderStyle-VerticalAlign =" Middle "HeaderStyle-HorizontalAlign =" Center "ItemStyle-HorizontalAlign =" Center "> <ItemTemplate> <span id =" zbm" style = "color: blue; cursor: pointer; "runat =" server "title = '<% # showZBMGS (Eval (" DIAN "). toString (), Eval ("RELI "). toString (), Eval ("YUANMEI "). toString (), Eval ("TIANRQ "). toString (), Eval ("QIYOU "). toString (), Eval ("CHAIYOU "). toString (), Eval ("ZSNY "). toString () %> '> <% # Eval ("ZBM") %> </span> </ItemTemplate> </asp: TemplateField>... </Columns> </asp: GridView>

5. Add a method to the backend cs code.

# Region discount coal calculation formula: // <summary> // obtain the discount coal calculation formula /// </summary> // <param name = "dian"> </param> /// <param name = "reli"> </param> // <param name = "yuanmei"> </param> // <param name = "tianranqi"> </param> // <param name = "qiyou"> </param> // <param name = "chaiyou"> </param> /// <param name = "zsny"> </param> /// <returns> </returns> public string showZBMGS (string dian, string reli, string yuanmei, string tianranqi, string qiyou, string chaiyou, string zsny) {double zbm = (double. parse (dian) * 0.1229) + (double. parse (reli) * 0.0341) + (double. parse (yuanmei) * 0.7143) + (double. parse (tianranqi) * 1.2143) + (double. parse (qiyou) * 1.4714) + (double. parse (chaiyou) * 1.4571) + (double. parse (zsny) * 1) * 10; ZBMGS = "= electric power X 0.1229 + Thermal Power x 0.0341 + raw coal x 0.7143 + natural gas X 1.2143 + gasoline x 1.4714 + Diesel x 1.4571 + Renewable Energy X 1 </br> ="; ZBMGS + = dian + "* 0.1229 +" + reli + "* 0.0341 +" + yuanmei + "* 0.7143 +" + tianranqi + "* 1.2143 +" + qiyou + "* 1.4714 + "+ chaiyou +" * 1.4571 + "+ zsny +" * 1 </br> = "; ZBMGS + = Math. round (zbm, 2); return ZBMGS;} # endregion

6. Apply the following message when loading the page:

$ (Function () {// Add information for the control prompt 2015-09-06 $ cb =$ ('# <% = this. gridView1.ClientID %> '). find ('span [id $ = "zbm"] '); $ ($ cb ). poshytip ();});

The above is all the content of this article and I hope it will help you.