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

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

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

var grid_selector = "#schedule-grid-table";
var pager_selector = "#schedule-grid-pager";
jQuery(function($) {
    $('.chosen-select').chosen({allow_single_deselect:true});
    var checkbox = '<input type="checkbox" name="checkbox_item" id = "selectAll"value="">';
    var colNames = [ ""+checkbox, "产品编号", "类型", "产品名称", "供应商", "出发地", "目的地","行程天数","销售时间","是否推荐","状态","操作" ];
    var gridData = [
        {
            name : "id",
            index : "id",
            width : 10,
            sortable : false,
            // hidden:true,
            formatter : function(cellvalue, options, rowObject) {
                var selectHtml ='<input type="checkbox" name="checkbox_item" value="'+cellvalue+'"></td>' ;
                return selectHtml;
            }
        },
        {
            name : "prod_no",
            index : "prod_no",
            width : 30,
            sortable : true
        },
        {
            name : "type",
            index : "type",
            width : 30,
            sortable : true,
            formatter : function(cellvalue, options, rowObject) {
            return dict.showDictDataCName('TRAVEL_PROD_TYPE',cellvalue,true);
            }
        },
        {
            name : "name",
            index : "name",
            width : 90,
            sortable : true,
            formatter : function(cellvalue, options, rowObject) {
                var html = "";
                if( rowObject.is_discount =='Y'){
                    html += "<span class='hui'>特惠</span>";
                }
                return html+=cellvalue;
            }
        },
        {
            name : "supplier",
            index : "supplier",
            width : 40,
            sortable : true
        },
        {
            name : "depart_place",
            index : "depart_place",
            width : 30,
            sortable : true
        },
        {
            name : "destination",
            index : "destination",
            width : 30,
            sortable : true
        },
        {
            name : "",
            index : "",
            width : 30,
            formatter : function(cellvalue, options, rowObject) {
                var combind=rowObject.trip_days+"天"+rowObject.trip_nights+"夜";
            return combind;
            }
        },
        {
            name : "",
            index : "",
            width : 60,
            sortable : true,
            formatter : function(cellvalue, options, rowObject) {
                var a ="0";
                var b="0";
                if(rowObject.sale_end_time!=undefined&&rowObject.sale_start_time!=undefined){
                    a=rowObject.sale_start_time.substr(0,10);
                    b=rowObject.sale_end_time.substr(0,10);
                }return a+"--"+b;
             }
        },
        {
            name : "is_recommend",
            index : "is_recommend",
            width : 20,
            sortable : true,
            formatter : function(cellvalue, options, rowObject) {
                var isYn="";
                if(cellvalue=="Y"){
                    isYn="是";
                }else if(cellvalue=="N"){
                    isYn="否";
                }
                return isYn;
            }
        },
        {
            name : "status",
            index : "status",
            width : 30,
            sortable : true,
            formatter : function(cellvalue, options, rowObject) {
                return dict.showDictDataCName('TRAVEL_PROD_STATUS',cellvalue,true);
     }
        },

        {
            name : "oper",
            index : "",
            width : 30,
            editable : false,
            sortable : false,
            align : 'left',
            resize : true,
            formatter : function(cellvalue, options, rowObject) {
                var editBtn = '<button type="button"  class="btn btn-xs btn-info" id="editBtn" data-toggle="button" onClick="toEditData(\''
                    + rowObject.id
                    + '\');">修改</button></div>';
                var deleteBtn = '<button type="button"  class="btn btn-xs btn-info" id="deleteBtn" data-toggle="button" onClick="deleteProductData(\''
                    + rowObject.id
                    + '\');">删除</button></div>';
                    return editBtn+" "+deleteBtn;
                }
        } ];

    jQuery(grid_selector).createTable({
        subGrid : false,
        url: ctx + "/travel/product/getTravelProductData.do?rand="+Math.random(),
        colNames: colNames,
        colModel: gridData,
        viewrecords : true,
        rowNum : 20,
        rowList : [ 20, 40, 60 ],
        pager : pager_selector,
        altRows : true,
        // multiselect : true,
        // multiboxonly : false,
        loadComplete: function () {
        }
    });
    $('.input-daterange').datepicker({autoclose: true, format: 'yyyy-mm-dd', language: 'zh-CN'});
    $("#selectAll").bind("click",function(){
        var status = $(this)[0].checked;
        $("#schedule-grid-table input[type='checkbox']").each(function () {
            $(this).prop("checked",status);
        })
    })
});

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