增加 jquery datables tooltip示例。

Author: YanZhiwei

YanZhiwei.JavaScript.Utilities/YanZhiwei.JavaScript.Utilities.csproj

@@ -542,6 +542,24 @@
     <Content Include="jquery\datatables\1.10.2\plugins\bootstrap\dataTables.bootstrap-rtl.css" />
     <Content Include="jquery\datatables\1.10.2\plugins\bootstrap\dataTables.bootstrap.css" />
     <Content Include="jquery\datatables\1.10.2\plugins\bootstrap\dataTables.bootstrap.js" />
+    <Content Include="jquery\jquery-ui-1.12.0\AUTHORS.txt" />
+    <Content Include="jquery\jquery-ui-1.12.0\external\jquery\jquery.js" />
+    <Content Include="jquery\jquery-ui-1.12.0\images\ui-icons_444444_256x240.png" />
+    <Content Include="jquery\jquery-ui-1.12.0\images\ui-icons_555555_256x240.png" />
+    <Content Include="jquery\jquery-ui-1.12.0\images\ui-icons_777620_256x240.png" />
+    <Content Include="jquery\jquery-ui-1.12.0\images\ui-icons_777777_256x240.png" />
+    <Content Include="jquery\jquery-ui-1.12.0\images\ui-icons_cc0000_256x240.png" />
+    <Content Include="jquery\jquery-ui-1.12.0\images\ui-icons_ffffff_256x240.png" />
+    <Content Include="jquery\jquery-ui-1.12.0\index.html" />
+    <Content Include="jquery\jquery-ui-1.12.0\jquery-ui.css" />
+    <Content Include="jquery\jquery-ui-1.12.0\jquery-ui.js" />
+    <Content Include="jquery\jquery-ui-1.12.0\jquery-ui.min.css" />
+    <Content Include="jquery\jquery-ui-1.12.0\jquery-ui.min.js" />
+    <Content Include="jquery\jquery-ui-1.12.0\jquery-ui.structure.css" />
+    <Content Include="jquery\jquery-ui-1.12.0\jquery-ui.structure.min.css" />
+    <Content Include="jquery\jquery-ui-1.12.0\jquery-ui.theme.css" />
+    <Content Include="jquery\jquery-ui-1.12.0\jquery-ui.theme.min.css" />
+    <Content Include="jquery\jquery-ui-1.12.0\LICENSE.txt" />
     <Content Include="jquery\zTree\3.5\zTree_example1.aspx" />
     <Content Include="jqUtilsDemo.aspx" />
     <Content Include="JsDemo.aspx" />
@@ -1380,6 +1398,7 @@
     <Content Include="jquery\jquery-1.9.1.min.map" />
     <Content Include="store.js\Changelog" />
     <Content Include="store.js\LICENSE" />
+    <Content Include="jquery\jquery-ui-1.12.0\package.json" />
     <None Include="Web.Debug.config">
       <DependentUpon>Web.config</DependentUpon>
     </None>

YanZhiwei.JavaScript.Utilities/jquery/datatables/1.10.2/datatables.html

@@ -4,8 +4,10 @@
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <title>datatables 1.10.2</title>
     <link href="media/css/jquery.dataTables.css" rel="stylesheet" />
+    <link href="../../jquery-ui-1.12.0/jquery-ui.min.css" rel="stylesheet" />
     <script src="../../../jsUtils.js" type="text/javascript"></script>
     <script src="../../jquery-1.9.1.js" type="text/javascript"></script>
+    <script src="../../jquery-ui-1.12.0/jquery-ui.min.js"></script>
     <script src="../../../jqUtils.js" type="text/javascript"></script>
     <script src="media/js/jquery.dataTables.js" type="text/javascript"></script>
     <script src="datatablesUtils.js" type="text/javascript"></script>
@@ -50,6 +52,7 @@
            { "time": "2015-10-12", "log": "test", "status": "正常" },
            { "time": "2015-10-13", "log": "test", "status": "正常" }
             ];
+
             $('#tableLog').dataTable().addJson(_jsonObj);
 
             //var _jsonString = JSON.stringify(_jsonObj);
@@ -113,6 +116,12 @@
             var _rowIndex = table.getRowIndexByParam('time', '2015-10-13');
             if (_rowIndex >= 0) {
                 table.updateRowByIndex(_rowIndex, { "time": "2015-10-22", "log": "test", "status": "不正常" });
+                var oTable = $('#tableLog').dataTable();
+                oTable.$('tr').tooltip({
+                    "delay": 0,
+                    "track": true,
+                    "fade": 250
+                });
             }
         }
         function getRowHtmlByParam() {
@@ -124,6 +133,25 @@
                 $(_row).css("background-color", "green");
             }, 2000);
         }
+        function addRowTooltip() {
+            $('#tableLog tbody tr').each(function () {
+
+                var sTitle;
+
+                var nTds = $('td', this);
+                var sBrowser = $(nTds[1]).text();
+                console.log("sBrowser:" + sBrowser);
+                this.setAttribute('title', sBrowser);
+            });
+
+            var oTable = $('#tableLog').dataTable();
+            /* Apply the tooltips */
+            oTable.$('tr').tooltip({
+                "delay": 0,
+                "track": true,
+                "fade": 250
+            });
+        }
     </script>
 </head>
 <body>
@@ -144,5 +172,6 @@
     <input type="button" value="getRowIndexByParam" onclick="getRowIndexByParam()" />
     <input type="button" value="deleteRowByParam" onclick="deleteRowByParam()" />
     <input type="button" value="getRowHtmlByParam" onclick="getRowHtmlByParam()" />
+    <input type="button" value="addRowTooltip" onclick="addRowTooltip()" />
 </body>
 </html>