没怎么接触过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 "100%", 9 height: "200px", 10 data: clients, 11 fields: [ 12 {name: "流程节点", type: "text", 100, css: "js_font_color", headercss: "js_header_color"}, 13 {name: "项目数量(单位)", type: "text", 140}, 14 {name: "金额(单位)", type: "text", 100}, 15 {name: "加权平均IRR", type: "text", 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 });
这样就实现了这个功能,希望大佬能给我说说更简单更好的办法。