給Datagrid添加操作列：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title></title> 6 <meta charset="utf-8" /> 7 <!-- 引入相關CSS --> 8 <!-- BaseCss --> 9 <link rel='stylesheet' href='/Styles/base.css' /> 10 <link rel='stylesheet' href='/Styles/table.css' /> 11 <link rel='stylesheet' href='/Scripts/lib/loadmask/jquery.loadmask.css' /> 12 <!-- XUICss --> 13 <link rel='stylesheet' href='/Scripts/lib/easyUI/themes/gray/easyui.css' /> 14 <link rel='stylesheet' href='/Scripts/lib/easyUI/themes/icon.css' /> 15 <link rel='stylesheet' href='/Scripts/lib/easyUI/themes/xUI.css' /> 16 <!-- 引入相關JS --> 17 <!-- JQueryJs --> 18 <script src='/Scripts/lib/jquery/jquery.min.js'></script> 19 <script src='/Scripts/lib/jquery/jquery.json-2.3.min.js'></script> 20 <script src='/Scripts/lib/jquery/jquery.extend.js'></script> 21 <!-- JQueryJs --> 22 23 <script src="/Scripts/lib/jquery/jquery.json-2.3.min.js"></script> 24 <!-- BaseJs --> 25 <script src="/Scripts/base.js"></script> 26 <script src="/Scripts/lib/loadmask/jquery.loadmask.js"></script> 27 <!-- XUIJs --> 28 <script src="/Scripts/lib/easyUI/jquery.easyui.min.js"></script> 29 <script src="/Scripts/lib/artDialog/artDialog.source.js?skin=chrome"></script> 30 <script src="/Scripts/lib/artDialog/artDialog.iframe.source.js?skin=chrome"></script> 31 <script src="/Scripts/xUI/xui.all.js"></script> 32 <script type="text/javascript"> 33 34 (function () { 35 var myModObj = { 36 /*公共變量存儲*/ 37 dataStore: { 38 ajaxUrl: "/Flow/Controls/Comm/VoteAjax.ashx"//ajax路徑 39 }, 40 /*組件對象存儲*/ 41 uiStore: { 42 gvVoteResultDetailList: null, 43 }, 44 /*初始化*/ 45 init: function () { 46 this.initUI(); //初始化組件 47 this.initData(); //初始化數據 48 this.initEvent(); //初始化事件 49 }, 50 /*初始化組件*/ 51 initUI: function () { 52 var that = this; 53 var setList = { 54 title: '投票明細', 55 iconCls: 'icon-table', 56 serverPaging: true, 57 getServerData: this.loadVoteResultDetail, 58 columns: [[ 59 { field: 'USER_NO', title: '投票人', width: 200, align: 'center' }, 60 { field: 'VOTE_RESULT_ZQ', title: '債券等級', width: 200, align: 'center' }, 61 { field: 'VOTE_RESULT_ZT', title: '主體等級', width: 200, align: 'center' }, 62 { 63 field: 'VOTE_RESULT_ZW', title: '展望', width: 200, align: 'center', 64 formatter: function (value) { 65 switch (value) { 66 case "0": 67 return "負面"; 68 case "1": 69 return "穩定"; 70 case "2": 71 return "正面"; 72 default: 73 return ""; 74 } 75 } 76 }, 77 { field: 'IMP_TIME', title: '投票時間', width: 200, align: 'center',align: "center" }, 78 { field: 'NOTE_CONTENT', title: '投票意見', width: 200, align: 'left' }, 79 { 80 field: 'key', title: '操作', formatter: function (value, row, index) { 81 return "<a class='link' onclick='modVoteResultCtrl.delVoteResult(\"" + value + "\");'>刪除</a>" 82 } 83 } 84 ]], 85 } 86 //創建投票明細數據表格 87 that.uiStore.gvVoteResultDetailList = $('#gvVoteResultDetailList').createDatagrid(setList); 88 }, 89 /*初始化數據*/ 90 initData: function () { 91 var that = modVoteResultCtrl; 92 that.loadVoteResult();//獲取投票結果 93 that.loadVoteResultDetail();//獲取投票結果明細 94 //顯示body 95 $("body").css("visibility", "visible"); 96 }, 97 /*初始化事件*/ 98 initEvent: function () { 99 }, 100 //獲取投票結果 101 loadVoteResult: function () { 102 var that = modVoteResultCtrl; 103 var param = { 104 reqType: "GetVoteResult", 105 instID: "555", 106 stepID: "555" 107 }; 108 that.ajaxDeal(that.dataStore.ajaxUrl, param, loadDataSuc); 109 //加載數據 110 function loadDataSuc(result) { 111 for (var i = 0; i < result.data.length; i++) { 112 if(result.data[i].VOTE_TYPE == '債券等級') 113 { 114 $("#lblZQDJ").text(result.data[i].GRADE); 115 } 116 if (result.data[i].VOTE_TYPE == '主體等級') 117 { 118 $("#lblZTDJ").text(result.data[i].GRADE); 119 } 120 if(result.data[i].VOTE_TYPE == '展望') 121 { 122 var grade = result.data[i].GRADE; 123 if ( grade == '0') { 124 $("#lblZW").text("負面"); 125 } 126 else if (grade == '1') { 127 $("#lblZW").text("穩定"); 128 } 129 else { 130 $("#lblZW").text("正面"); 131 } 132 } 133 } 134 } 135 }, 136 //獲取投票結果明細 137 loadVoteResultDetail: function (pageNumber, pageSize) { 138 var that = modVoteResultCtrl; 139 //處理頁碼 140 if (pageNumber == undefined || pageSize == undefined) { 141 pageNumber = that.uiStore.gvVoteResultDetailList.getPageNumber(); 142 pageSize = that.uiStore.gvVoteResultDetailList.getPageSize(); 143 } 144 var param = { 145 reqType: "GetVoteResultDetail", 146 instID: "555", 147 stepID: "555", 148 pageSize: pageSize,//每頁數據 149 pageNum: pageNumber//頁數 150 }; 151 that.ajaxDeal(that.dataStore.ajaxUrl, param, loadDataSuc); 152 //加載數據 153 function loadDataSuc(result) { 154 var dataInfo = {//分頁信息 155 total: result.data.length <= 0 ? 0 : result.data[0].TOTAL_COUNT,//與數據庫中總記錄數字段對應 156 rows: result.data 157 } 158 that.uiStore.gvVoteResultDetailList.loadData(dataInfo); 159 } 160 }, 161 delVoteResult: function () { 162 var row = $('#gvVoteResultDetailList').datagrid('getSelected'); 163 if (row){ 164 console.log(row); 165 console.log(row.RN); 166 } 167 } 168 }; 169 //賦給公共的對象 170 exp.modVoteResultCtrl = myModObj; 171 })(); 172 /** 173 * 引入公共工具集及其他模塊 174 */ 175 window.modVoteResultCtrl = imp(["baseHelper", "modVoteResultCtrl"]); 176 /** 177 * 頁面初始化 178 */ 179 $(function () { 180 modVoteResultCtrl.init(); 181 }); 182 </script> 183 </head> 184 <body style="visibility:hidden"> 185 <div> 186 <div title="投票結果" class="easyui-panel" icon="icon-edit" collapsible="true" style="width: auto; height: auto; padding: 5px;"> 187 <table class="tableList"> 188 <tr> 189 <td class="title" align="center">債券等級：</td> 190 <td> 191 <label id="lblZQDJ" /> 192 </td> 193 <td class="title" align="center">主體等級：</td> 194 <td> 195 <label id="lblZTDJ" /> 196 </td> 197 <td class="title" align="center">展望:</td> 198 <td> 199 <label id="lblZW" /> 200 </td> 201 </tr> 202 </table> 203 </div> 204 <table id="gvVoteResultDetailList"></table> 205 </div> 206 </body> 207 </html>
獲取選中行數據：
結果：
