沒怎么接觸過Grid插件；

解決的問題是：點擊Grid表行里的內容觸發js方法彈出模態框，用以顯示選中內容的詳細信息。

思路：給準備要觸發的列加上一個css屬性，通過這個css屬性來獲取元素并觸發js方法。

1 function flowGrid() { 2 var clients = [ 3 {"流程節點": "立項", "項目數量(單位)": 25, "金額(單位)": 1, "加權平均IRR": "231"}, 4 {"流程節點": "審批", "項目數量(單位)": 45, "金額(單位)": 2, "加權平均IRR": "1234"}, 5 {"流程節點": "待放款情況", "項目數量(單位)": 29, "金額(單位)": 3, "加權平均IRR": "124"} 6 ]; 7 $("#flow_grid").jsGrid({ 8 width: "100%", 9 height: "200px", 10 data: clients, 11 fields: [ 12 {name: "流程節點", type: "text", width: 100, css: "js_font_color", headercss: "js_header_color"}, 13 {name: "項目數量(單位)", type: "text", width: 140}, 14 {name: "金額(單位)", type: "text", width: 100}, 15 {name: "加權平均IRR", type: "text", width: 100} 16 ] 17 }); 18 }

以上是實例化Grid表格的代碼，在將要觸發js方法的列（流程節點）加了一個css屬性。

1 $(document).on("click", ".js_font_color", function () { 2 $(".js_font_color").attr("data-toggle", "modal"); 3 $(".js_font_color").attr("data-target", "#myModal"); 4 console.log($("#flow_name")); 5 console.log($(this).html()); 6 document.getElementById("flow_name").innerHTML = $(this).html(); 7 8 $(this).unbind(); 9 });

這樣就實現了這個功能，希望大佬能給我說說更簡單更好的辦法。

轉載于:https://www.cnblogs.com/Yinjiawei/p/9555460.html

總結

以上是生活随笔為你收集整理的Grid表格的js触发事件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。