复选框
CreateTime--2017年6月5日14:04:55
Author:Marydon
五、复选框
(一)语法
<input type="checkbox" />
(二)点击当前行改变复选框的选中状态
第一部分:HTML
<table style=" 100%; border-collapse: collapse;" cellspacing="0" cellpadding="1" border="0" width="100%"> <tbody> <tr class="TableHeader" align="center"> <td class="TableHeaderCell" style=" 25px"> <input type="checkbox" id="checkSelect" onclick="javascript:checkSelected('checkSelect','CONSULT_SCHEDULE_ID_TEMP');" /> </td> <td class="TableHeaderCell" style=" 35px">项次</td> <td class="TableHeaderCell" nowrap="nowrap"> 星期 </td> <td class="TableHeaderCell" nowrap="nowrap"> 午别 </td> </tr> <tr class="TableRow" oldclass="TableRow" align="center" key="${row.CONSULT_SCHEDULE_ID}" onclick="javascript:RowSelect(this,'downRow');GetSelect(event,'downRow');" onmouseover="javascript:if (this.className!='TableRowSelected') this.className='TableRowOver'" onmouseout="javascript:if (this.className!='TableRowSelected') this.className='TableRow'"> <td class="TableCellIndex" nowrap="nowrap"> <input type="checkbox" name="CONSULT_SCHEDULE_ID_TEMP" CLOSE_TZ="${row.CLOSE_TZ}" REPLACE_TZ="${row.REPLACE_TZ}" value="${row.CONSULT_SCHEDULE_ID}"/> </td> <td class="TableCellIndex" nowrap="nowrap"> 1 <input type="hidden" value="${row.ORG_CODE}"/> </td> <td nowrap="nowrap" class="TableCell" align="left"> 星期一 </td> <td nowrap="nowrap" class="TableCell" align="left"> 上午 </td> </tr> <tr class="TableRow" oldclass="TableRow" align="center" key="${row.CONSULT_SCHEDULE_ID}" onclick="javascript:RowSelect(this,'downRow');GetSelect(event,'downRow');" onmouseover="javascript:if (this.className!='TableRowSelected') this.className='TableRowOver'" onmouseout="javascript:if (this.className!='TableRowSelected') this.className='TableRow'"> <td class="TableCellIndex" nowrap="nowrap"> <input type="checkbox" name="CONSULT_SCHEDULE_ID_TEMP" CLOSE_TZ="${row.CLOSE_TZ}" REPLACE_TZ="${row.REPLACE_TZ}" value="${row.CONSULT_SCHEDULE_ID}"/> </td> <td class="TableCellIndex" nowrap="nowrap"> 2 <input type="hidden" value="${row.ORG_CODE}"/> </td> <td nowrap="nowrap" class="TableCell" align="left"> 星期二 </td> <td nowrap="nowrap" class="TableCell" align="left"> 下午 </td> </tr> </tbody> </table>
第二部分:CSS
.TableHeader { clear: both; height: 30px; line-height: 30px; } .TableHeaderCell { height: 100%; line-height: 21px; color: #999; text-indent: 3px; border: #CECECE 1px solid; cursor: pointer; white-space: nowrap; background-image: url(images/toolbar.gif); } .TableRow { height: 21px; background-color: #ffffff; } .TableRowOver { cursor: pointer; height: 21px; background-color: #f4f4f4; } .TableRowSelected { cursor: pointer; height: 21px; background-color: #f4f4f4; } .TableCell { height: 25px; line-height: 25px; text-indent: 3px; color: #555; border-right: #CECECE 1px solid; border-bottom: #CECECE 1px solid; cursor: pointer; } .TableCellIndex { line-height: 21px; color: #000; border: #CECECE 1px solid; }
第三部分:JAVASCRIPT
/** * 点击行、复选框 改变复选框的选中状态 * @param {Object} event * 必要参数:目标源事件 * @param {string} rowName * 可(必)要参数:行名称 * 该参数是否必选,取决于调用RowSelect()方法时,是否携带第二个参数,即(同步): * 若携带第二个参数,都必须携带,并必须保持一致; * 若不携带,都不携带 * @describe: * a.改变选中状态分为两种:点击行改变;点击复选框改变; * b.如何区分两种点击状态? * checkboxObj==srcObj ? 点击的是复选框 : 点击的是行; */ function GetSelect(event,rowName) { // 获取当前行对象 var rowObj = rowName ? (window[rowName]) : window.row; // 获取该行tr的第一个td里面的复选框 var checkboxObj = $(rowObj).find(':checkbox')[0]; // 点击事件源对象 var srcObj = event.srcElement ? event.srcElement : event.target; // 获取当前行所在的table var tableObj = $(srcObj).parents('table')[0]; // 判断条件 var flag = (checkboxObj != srcObj) ? (!checkboxObj.checked) : checkboxObj.checked; if (flag) { // 获取当前table有多少行 var rowsLength = tableObj.rows.length; // rowsLength = (checkboxObj != srcObj) ? (rowsLength - 2) : (rowsLength - 1); // 获取页面上有多少个 name=checkboxObj.name 选中的复选框 var checkboxLength = $('[name='+ checkboxObj.name + ']:checked').length; if (rowsLength == checkboxLength){ // 选中 当前行所在table的第一个复选框 $(tableObj).find(':checkbox')[0].checked = true; }; } else { // 取消勾选 当前行所在table的第一个复选框 $(tableObj).find(':checkbox')[0].checked = false; } // 改变当前行的复选框选中状态:如果没选中,就选中;已经选中,就取消选中 if (checkboxObj != srcObj) { checkboxObj.checked = !checkboxObj.checked; } }; /** * 全选,全不选 * @describe * 根据主复选框的选中状态同步改变子复选框的选中状态 * @param {string} checkedId * 必要参数:主复选框的id * @param {string} checkedTagName * 必要参数:子复选框的name */ function checkSelected(checkedId,checkedTagName) { // 获取所有的子复选框标签 var checkTags = $('[name='+ checkedTagName +']'); // 获取主复选框的选中状态 var checkedStatus = $('#' + checkedId)[0].checked; for (var i = 0; i < checkTags.length; i++) { checkTags[i].checked = checkedStatus; } }; /** * 选中当前行 * @param {Object} row * 必要参数,当前行对象 * @param {string} name * 可选参数,行名称, * 当页面只有一个这样的table时(点击该行就选中),调用该方法时可以不传该参数 * 当页面有多个这样的table时,用于区分。 */ function RowSelect(row, name) { if(!name) name = "row"; if(window[name]) { window[name].className = window[name].getAttribute("oldClass"); } row.className = "TableRowSelected"; window[name] = row; }
(三)通过复选框实现批量操作(删除、更改)
接着上面
/** * 停诊 */ this.updateCloseStatus = function () { // 主键 var CONSULT_SCHEDULE_ID = ""; // 获取页面上已勾选的复选框 var checkTags = $('input[name=CONSULT_SCHEDULE_ID_TEMP]:checked'); if (checkTags.length < 1) { Dialog.Alert("消息提示", "请选择要修改的行!", null, null, 100); return; } // 取值并拼接成字符串 $(checkTags).each(function(i,item) { if (0 == $(item).attr('CLOSE_TZ')) { Dialog.Alert("消息提示", "请取消勾选已停诊的行!", null, null, 100); return; } // 字符串拼接:由于数据库中该表的id是字符串,所以需要拼接上引号' CONSULT_SCHEDULE_ID += "'" + $(item).val() + "'" + ","; }); // 去除最后一个逗号 CONSULT_SCHEDULE_ID = CONSULT_SCHEDULE_ID.slice(0, -1); // 或CONSULT_SCHEDULE_ID = CONSULT_SCHEDULE_ID.substring(0,CONSULT_SCHEDULE_ID.length - 1); Dialog.Confirm("消息提示", "确定停诊吗?", function() { var param = ""; // 是否停诊-0:是 1:否 param ="CONSULT_SCHEDULE_ID=" + CONSULT_SCHEDULE_ID + "&CLOSE_TZ=0"; // 发送Ajax请求 var request = new $WebRequest(baseUrl + "/telemedicine/remoteCons/schedule/updateCloseStatus.do", param, function(result) { // 对返回的json数据进行解析 getJsonResult(result, function() { // 操作成功/异常信息 Dialog.Alert("消息提示", result.msg, function() { // 刷新页面 object.loadData($get("PageIndex").value); }, null, 100); }); }); request.Start(); }, null, null, 100, window); };
说明:
1.批量操作的实现依赖于:复选框的选中状态及Ajax实现;
2.Dialog对象是封装好的方法;
3.后台及SQL实现见文章:IBATIS + ORACLE(二)。