标签:blog let 操作 return lin html isp == hose
jQuery 还是很6的,基于这个的表格框架gdGrid一直也在用,主要是可以自带分页,而且样式什么的基本不用怎么调。
原型要求所有列之前有一列是多选框,来实现批量删除多条数据的功能。
1 var grid_selector = "#schedule-grid-table"; 2 var pager_selector = "#schedule-grid-pager"; 3 jQuery(function($) { 4 $(‘.chosen-select‘).chosen({allow_single_deselect:true}); 5 var checkbox = ‘<input type="checkbox" name="checkbox_item" id = "selectAll"value="">‘; 6 var colNames = [ ""+checkbox, "产品编号", "类型", "产品名称", "供应商", "出发地", "目的地","行程天数","销售时间","是否推荐","状态","操作" ]; 7 var gridData = [ 8 { 9 name : "id", 10 index : "id", 11 width : 10, 12 sortable : false, 13 // hidden:true, 14 formatter : function(cellvalue, options, rowObject) { 15 var selectHtml =‘<input type="checkbox" name="checkbox_item" value="‘+cellvalue+‘"></td>‘ ; 16 return selectHtml; 17 } 18 }, 19 { 20 name : "prod_no", 21 index : "prod_no", 22 width : 30, 23 sortable : true 24 }, 25 { 26 name : "type", 27 index : "type", 28 width : 30, 29 sortable : true, 30 formatter : function(cellvalue, options, rowObject) { 31 return dict.showDictDataCName(‘TRAVEL_PROD_TYPE‘,cellvalue,true); 32 } 33 }, 34 { 35 name : "name", 36 index : "name", 37 width : 90, 38 sortable : true, 39 formatter : function(cellvalue, options, rowObject) { 40 var html = ""; 41 if( rowObject.is_discount ==‘Y‘){ 42 html += "<span class=‘hui‘>特惠</span>"; 43 } 44 return html+=cellvalue; 45 } 46 }, 47 { 48 name : "supplier", 49 index : "supplier", 50 width : 40, 51 sortable : true 52 }, 53 { 54 name : "depart_place", 55 index : "depart_place", 56 width : 30, 57 sortable : true 58 }, 59 { 60 name : "destination", 61 index : "destination", 62 width : 30, 63 sortable : true 64 }, 65 { 66 name : "", 67 index : "", 68 width : 30, 69 formatter : function(cellvalue, options, rowObject) { 70 var combind=rowObject.trip_days+"天"+rowObject.trip_nights+"夜"; 71 return combind; 72 } 73 }, 74 { 75 name : "", 76 index : "", 77 width : 60, 78 sortable : true, 79 formatter : function(cellvalue, options, rowObject) { 80 var a ="0"; 81 var b="0"; 82 if(rowObject.sale_end_time!=undefined&&rowObject.sale_start_time!=undefined){ 83 a=rowObject.sale_start_time.substr(0,10); 84 b=rowObject.sale_end_time.substr(0,10); 85 }return a+"--"+b; 86 } 87 }, 88 { 89 name : "is_recommend", 90 index : "is_recommend", 91 width : 20, 92 sortable : true, 93 formatter : function(cellvalue, options, rowObject) { 94 var isYn=""; 95 if(cellvalue=="Y"){ 96 isYn="是"; 97 }else if(cellvalue=="N"){ 98 isYn="否"; 99 } 100 return isYn; 101 } 102 }, 103 { 104 name : "status", 105 index : "status", 106 width : 30, 107 sortable : true, 108 formatter : function(cellvalue, options, rowObject) { 109 return dict.showDictDataCName(‘TRAVEL_PROD_STATUS‘,cellvalue,true); 110 } 111 }, 112 113 { 114 name : "oper", 115 index : "", 116 width : 30, 117 editable : false, 118 sortable : false, 119 align : ‘left‘, 120 resize : true, 121 formatter : function(cellvalue, options, rowObject) { 122 var editBtn = ‘<button type="button" class="btn btn-xs btn-info" id="editBtn" data-toggle="button" onClick="toEditData(\‘‘ 123 + rowObject.id 124 + ‘\‘);">修改</button></div>‘; 125 var deleteBtn = ‘<button type="button" class="btn btn-xs btn-info" id="deleteBtn" data-toggle="button" onClick="deleteProductData(\‘‘ 126 + rowObject.id 127 + ‘\‘);">删除</button></div>‘; 128 return editBtn+" "+deleteBtn; 129 } 130 } ]; 131 132 jQuery(grid_selector).createTable({ 133 subGrid : false, 134 url: ctx + "/travel/product/getTravelProductData.do?rand="+Math.random(), 135 colNames: colNames, 136 colModel: gridData, 137 viewrecords : true, 138 rowNum : 20, 139 rowList : [ 20, 40, 60 ], 140 pager : pager_selector, 141 altRows : true, 142 // multiselect : true, 143 // multiboxonly : false, 144 loadComplete: function () { 145 } 146 }); 147 $(‘.input-daterange‘).datepicker({autoclose: true, format: ‘yyyy-mm-dd‘, language: ‘zh-CN‘}); 148 $("#selectAll").bind("click",function(){ 149 var status = $(this)[0].checked; 150 $("#schedule-grid-table input[type=‘checkbox‘]").each(function () { 151 $(this).prop("checked",status); 152 }) 153 }) 154 });
额,这个表头有自动排序的功能,点击表头的每个字段会自动排序。所以我改成了checkbox之后点击事件没有反应..思考了大半天才发现是把那一列的sortable设置为false..
第二个坑的地方在于,这个checkbox里面的checked的属性要用$(this)[0].checked才能访问到..而且如果直接按照网上的写
$(
"#checkAll"
).click(
function
() {
$(
‘input[name="subBox"]‘
).attr(
"checked"
,
this
.checked);
});
$("#selectAll").bind("click",function(){ var status = $(this)[0].checked; $("#schedule-grid-table input[type=‘checkbox‘]").each(function () { $(this).prop("checked",status); }) })
改成上述的方法才能多次点击,多次改变。。
还有一点,就是,关于批量删除,我把这个方法和单个删除的写在一起了,显得代码很冗长..
function deleteProductData(id) { var deleteIds = id; if(deleteIds==null||deleteIds==‘‘||deleteIds==undefined){ deleteIds=""; $("input[name=‘checkbox_item‘]").each( function(){ if($(this).prop("checked")){ deleteIds +=$(this).val()+‘,‘ } } ); } // alert(deleteIds); if(deleteIds==‘‘||deleteIds==null){ $com.warn("请选择相应的产品删除!", 150); }else { $.confirm({ title: ‘提示‘, content: ‘您确认删除该产品?‘, confirm: function () { $.post(ctx + ‘/travel/product/deleteProductById.do‘, {str: deleteIds+""}, function (responseBody) { if (responseBody.code == ‘0000‘) { $com.warn(responseBody.msg, 150); } else { $com.warn("删除失败", 150); } jQuery(grid_selector).trigger("reloadGrid"); }) } }); }
综上,就可以实现gdGrid删除了。。
0410_gdgrid_checkbox_自己强加的多选,选中,批量删除
标签:blog let 操作 return lin html isp == hose
原文地址:http://www.cnblogs.com/missYuLan/p/6690108.html