0410_gdgrid_checkbox_自己强加的多选，选中，批量删除

jQuery 还是很6的，基于这个的表格框架jdGrid一直也在用，主要是可以自带分页，而且样式什么的基本不用怎么调。

原型要求所有列之前有一列是多选框，来实现批量删除多条数据的功能。

  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 });

View Code

额，这个表头有自动排序的功能，点击表头的每个字段会自动排序。所以我改成了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");
                })
            }
        });
    }

View Code

综上，就可以实现gdGrid删除了。。