在專案中,經常遇到,於是整理
引用bootstrap的js和css
程式碼解釋:
$("#dgFlowList").find(":checkbox:checked").each(function(){
var val = $(this).parents("tr").text();
data.push(val);
});
程式碼:
1 <html> 2 <head> 3 <title>多選</title> 4 <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"> 5 <link rel="stylesheet" href="bootstrap/css/bootstrap-theme.min.css"> 6 <script src="js/jquery.min.js"></script> 7 <script src="js/app.js"></script> 8 <script src="bootstrap/js/bootstrap.js"></script> 9 <script type="text/javascript"> 10 $(document).ready(function () { 11 $("#select_button").on('click',function(){ 12 var checkids = []; 13 var data = []; 14 $("input[name='ckb']:checked").each(function(i){ 15 checkids[i] = $(this).val(); 16 }); 17 if(checkids.length<=0){ 18 $.notify('請選擇請假單',{status: "danger"}); 19 }else{ 20 console.log(checkids); 21 $("#dgFlowList").find(":checkbox:checked").each(function(){ 22 var val = $(this).parents("tr").text(); 23 data.push(val); 24 }); 25 console.log(data); 26 } 27 }); 28 }); 29 30 function deleteCurrentRow(obj){ 31 var tr=obj.parentNode.parentNode; 32 var tbody=tr.parentNode; 33 tbody.removeChild(tr); 34 //只剩行首時刪除表格 35 if(tbody.rows.length==0) { 36 tbody.parentNode.removeChild(tbody); 37 } 38 } 39 </script> 40 41 </head> 42 <body> 43 <table cellspacing="0" rules="all" bordercolor="#CCCCCC" border="1" id="dgFlowList" 44 style="border-color:#CCCCCC;border-width:1px;border-style:solid;width:98%;border-collapse:collapse;MARGIN: 5px 0px"> 45 <tr class="DataGrid_HeaderStyle" nowrap="nowrap" align="Center"> 46 <th></th><th>流程名稱</th><th>表單名稱</th><th>操作</th> 47 </tr> 48 <tr> 49 <td><input type="checkbox" name="ckb" value="1"></td> 50 <td style="width:35%;">請假單1</td> 51 <td style="width:35%;">請假單</td> 52 <td align="Center" style="width:20%;"> 53 <a href="javascript:;" onclick='deleteCurrentRow(this)'>刪除</a> 54 </td> 55 </tr> 56 <tr> 57 <td><input type="checkbox" name="ckb" value="2"></td> 58 <td style="width:35%;">請假單2</td> 59 <td style="width:35%;">請假單</td> 60 <td align="Center" style="width:20%;"> 61 <a href="javascript:;" onclick='deleteCurrentRow(this)'>刪除</a> 62 </td> 63 </tr> 64 <tr> 65 <td><input type="checkbox" name="ckb" value="3"></td> 66 <td style="width:35%;">請假單3</td> 67 <td style="width:35%;">請假單</td> 68 <td align="Center" style="width:20%;"> 69 <a href="javascript:;" onclick='deleteCurrentRow(this)'>刪除</a> 70 </td> 71 </tr> 72 <tr> 73 <td><input type="checkbox" name="ckb" value="4"></td> 74 <td style="width:35%;">請假單4</td> 75 <td style="width:35%;">請假單</td> 76 <td align="Center" style="width:20%;"> 77 <a href="javascript:;" onclick='deleteCurrentRow(this)'>刪除</a> 78 </td> 79 </tr> 80 <tr> 81 <td><input type="checkbox" name="ckb" value="5"></td> 82 <td style="width:35%;">請假單5</td> 83 <td style="width:35%;">請假單</td> 84 <td align="Center" style="width:20%;"> 85 <a href="javascript:;" onclick='deleteCurrentRow(this)'>刪除</a> 86 </td> 87 </tr> 88 </table> 89 <div align="center"> 90 <button type="button" class="btn btn-primary" id="select_button"> 多選</button> 91 </div> 92 </body> 93 </html>
app.js程式碼,是為notify寫的,於功能沒有多大的關係
1 /** 2 * Notify Addon definition as jQuery plugin 3 * Adapted version to work with Bootstrap classes 4 * More information http://getuikit.com/docs/addons_notify.html 5 */ 6 7 (function ($, window, document) { 8 9 var containers = {}, 10 messages = {}, 11 12 notify = function (options) { 13 14 if ($.type(options) == 'string') { 15 options = {message: options}; 16 } 17 18 if (arguments[1]) { 19 options = $.extend(options, $.type(arguments[1]) == 'string' ? {status: arguments[1]} : arguments[1]); 20 } 21 22 return (new Message(options)).show(); 23 }, 24 closeAll = function (group, instantly) { 25 if (group) { 26 for (var id in messages) { 27 if (group === messages[id].group) messages[id].close(instantly); 28 } 29 } else { 30 for (var id in messages) { 31 messages[id].close(instantly); 32 } 33 } 34 }; 35 36 var Message = function (options) { 37 38 var $this = this; 39 40 this.options = $.extend({}, Message.defaults, options); 41 42 this.uuid = "ID" + (new Date().getTime()) + "RAND" + (Math.ceil(Math.random() * 100000)); 43 this.element = $([ 44 // alert-dismissable enables bs close icon 45 '<div class="uk-notify-message alert-dismissable">', 46 '<a class="close">×</a>', 47 '<div>' + this.options.message + '</div>', 48 '</div>' 49 50 ].join('')).data("notifyMessage", this); 51 52 // status 53 if (this.options.status) { 54 this.element.addClass('alert alert-' + this.options.status); 55 this.currentstatus = this.options.status; 56 } 57 58 this.group = this.options.group; 59 60 messages[this.uuid] = this; 61 62 if (!containers[this.options.pos]) { 63 containers[this.options.pos] = $('<div class="uk-notify uk-notify-' + this.options.pos + '"></div>').appendTo('body').on("click", ".uk-notify-message", function () { 64 $(this).data("notifyMessage").close(); 65 }); 66 } 67 }; 68 69 70 $.extend(Message.prototype, { 71 72 uuid: false, 73 element: false, 74 timout: false, 75 currentstatus: "", 76 group: false, 77 78 show: function () { 79 80 if (this.element.is(":visible")) return; 81 82 var $this = this; 83 84 containers[this.options.pos].show().prepend(this.element); 85 86 var marginbottom = parseInt(this.element.css("margin-bottom"), 10); 87 88 this.element.css({ 89 "opacity": 0, 90 "margin-top": -1 * this.element.outerHeight(), 91 "margin-bottom": 0 92 }).animate({"opacity": 1, "margin-top": 0, "margin-bottom": marginbottom}, function () { 93 94 if ($this.options.timeout) { 95 96 var closefn = function () { 97 $this.close(); 98 }; 99 100 $this.timeout = setTimeout(closefn, $this.options.timeout); 101 102 $this.element.hover( 103 function () { 104 clearTimeout($this.timeout); 105 }, 106 function () { 107 $this.timeout = setTimeout(closefn, $this.options.timeout); 108 } 109 ); 110 } 111 112 }); 113 114 return this; 115 }, 116 117 close: function (instantly) { 118 119 var $this = this, 120 finalize = function () { 121 $this.element.remove(); 122 123 if (!containers[$this.options.pos].children().length) { 124 containers[$this.options.pos].hide(); 125 } 126 127 delete messages[$this.uuid]; 128 }; 129 130 if (this.timeout) clearTimeout(this.timeout); 131 132 if (instantly) { 133 finalize(); 134 } else { 135 this.element.animate({ 136 "opacity": 0, 137 "margin-top": -1 * this.element.outerHeight(), 138 "margin-bottom": 0 139 }, function () { 140 finalize(); 141 }); 142 } 143 }, 144 145 content: function (html) { 146 147 var container = this.element.find(">div"); 148 149 if (!html) { 150 return container.html(); 151 } 152 153 container.html(html); 154 155 return this; 156 }, 157 158 status: function (status) { 159 160 if (!status) { 161 return this.currentstatus; 162 } 163 164 this.element.removeClass('alert alert-' + this.currentstatus).addClass('alert alert-' + status); 165 166 this.currentstatus = status; 167 168 return this; 169 } 170 }); 171 172 Message.defaults = { 173 message: "", 174 status: "normal", 175 timeout: 5000, 176 group: null, 177 pos: 'top-center' 178 }; 179 180 181 $["notify"] = notify; 182 $["notify"].message = Message; 183 $["notify"].closeAll = closeAll; 184 185 return notify; 186 187 }(jQuery, window, document));
