kendoTooltip的使用

效果如圖所示：

• 滑鼠放到對應的頭像圖示上，會出來一個對應型別說明的氣泡；

  
  
  

1. html頁面，設定容器

• 在html頁面中設定一個容器，用來盛放生成的表格；
• 相當於在頁面上挖了個坑，然後js裡寫好東西之後，填到這個坑裡面；

// 在html頁面中設定一個容器，用來盛放生成的表格
// 相當於在挖了個坑，然後js裡寫好東西之後，填到這個坑裡面
<div id="accessKey_table">
</div>

2. js頁面，程式碼生成氣泡

 //圖示上的提示
            // 這裡的id 對應的是，kendoui使用grid生成表格在html中設定的一個容器的id
           // 類似於echarts，把畫完的圖放到對應的容器中
            $("#accessKey_table").kendoTooltip({
                // 圖示顯示位置；第一列;
                filter: "td:nth-child(1)",
                // 氣泡出現的位置，上下左右
                position: "top",
                content: function(e){
                    console.log("e",e);
                   // 取出每一行的資料
                    var dataItem = grid.dataItem(e.target.closest("tr"));
                   // 列印輸出，檢視資料格式
                    console.log("dataItem",dataItem);
                   // 這個用於繫結 氣泡裡面要顯示的內容
                    var status = dataItem.privilegeCategory;//取到對應行資料的對應key的value值
                    return status;
                }
            });

3. 檢視每一行的資料格式

4. 怎麼抓取對應行的資料

var dataItem = grid.dataItem(e.target.closest("tr"));

或者：

 var row = $(this).closest("tr"),
dataItem = grid.dataItem(row);

// 等價於下：

var row = $(this).closest("tr");
var dataItem = grid.dataItem(row);