问题描述

Metronic UI框架表格管理问题

想问下这个Metronic managed -table使用的时候

 var User = function () {
    var inittable = function(){
        var oTable = $('#usertable').dataTable( {
            "bServerSide": true,
            "sAjaxSource": "listuser",
            "bProcessing": false,
            //simple_numbers  full_numbers
            //"sPaginationType": "two_button",
            "bFilter": true,//过滤功能
            "bSort": false,//排序功能
            "oLanguage": {
                "sUrl": "js/datatable-cn.txt",
                "sSearch":"登陆名："
            },
            "aoColumnDefs": [{
                'bSortable': false,
                'aTargets': [0]
            }],
            "aoColumns": [
                { "mDataProp": function(lineData){
                    var id = lineData.id;
                    return '<input type="checkbox" name="ck_user" class="checkboxes" value="'+id+'"/>';
                }},
                { "mDataProp": "id" },
                { "mDataProp": "firstName" },
                { "mDataProp": "lastName" },
                { "mDataProp": "email" },
                { "mDataProp": function(lineData){
                    var id = lineData.id;
                    var del = '<button id="sample_editable_1_new" class="btn red" onclick="del(''+id+'')">删除<i class="icon-minus"></i></button>';
                    var edit = '<button id="sample_editable_1_new" class="btn green" onclick="edit(''+id+'')">编辑<i class="icon-minus"></i></button>';
                    var initGroup = '<button id="sample_editable_1_new" class="btn green" onclick="initGroup(''+id+'')">角色分配<i class="icon-minus"></i></button>';
                    return del +" " +initGroup +" " +edit;
                } }
          ]
        } );

        $('#ckcolum input[type="checkbox"]').change(function(){
            var iCol = parseInt($(this).attr("data-column"));
            var bVis = oTable.fnSettings().aoColumns[iCol].bVisible;
            oTable.fnSetColumnVis(iCol, (bVis ? false : true));
        });

        //添加全选和反选功能
        jQuery('#usertable .group-checkable').change(function () {
            var set = jQuery(this).attr("data-set");
            var checked = jQuery(this).is(":checked");
            jQuery(set).each(function () {
                if (checked) {
                    $(this).attr("checked", true);
                } else {
                    $(this).attr("checked", false);
                }
            });
            jQuery.uniform.update(set);
        });

        jQuery('#usertable_wrapper .dataTables_filter input').addClass("m-wrap small"); // modify table search input
        jQuery('#usertable_wrapper .dataTables_length select').addClass("m-wrap small"); // modify table per page dropdown
        jQuery('#usertable_wrapper .dataTables_length select').select2(); // initialzie select2 dropdown
    };

    return {
        init: function () {
            inittable();
        }
    };

}();

创建实例如上代码，效果图如下：

1、查询怎么样才能起作用？
2、前面的checkbox我是动态创建的，之前按照框架源码加上了相应的样式，但是前面的点击事件不可用了，不知道是什么原因？
3、这个表格如果数据做了修改，怎么让他动态刷新？

解决方案

这个框架在App.js里封装了jquery.uniform的调用，你这种情况 在你生成完DOM后 调用一下App(); 这个checkbox就OK了 我也碰到这个问题 搞了好长时间

解决方案二：

2 是 插件BUG。 作者很久没更新了。通过datatable 的DrawCallback 事件自己写了一段。如下。供参考

         $('#sample_1').dataTable({
                "sAjaxSource": "index.php?r=user/myAjax",
                "fnDrawCallback":DrawCallback,
                "aLengthMenu": [
                    [5, 15, 20, -1],
                    [5, 15, 20, "All"] // change per page values here
                ],
                // set the initial value
                "iDisplayLength": 5,
                "sPaginationType": "bootstrap",
                "oLanguage": {
                    "sLengthMenu": "_MENU_ records",
                    "oPaginate": {
                        "sPrevious": "Prev",
                        "sNext": "Next"
                    }
                },
                "aoColumnDefs": [{
                        'bSortable': false,
                        'aTargets': [0]
                    }
                ]
            });
            function DrawCallback(){
                    jQuery('.checkboxes').click(function(){
                                var checked = jQuery(this).is(":checked");
                                if(checked){
                                        jQuery(this).parent().addClass("checked");
                                        jQuery(this).attr("checked",true);
                                    }else{
                                        jQuery(this).parent().removeClass("checked");
                                        jQuery(this).attr("checked",false);
                                    }
                    });
                }
            jQuery('#sample_1 .group-checkable').change(function () {
                var set = jQuery(this).attr("data-set");
                var checked = jQuery(this).is(":checked");
                jQuery(set).each(function () {
                    if (checked) {
                            $(this).attr("checked", true);
                            $(this).parent("span").addClass("checked");
                        } else {
                            $(this).attr("checked", false);
                            $(this).parent("span").removeClass("checked");
                        }
                    $(this).parents('tr').toggleClass("active");
                });
                jQuery.uniform.update(set);

            });

解决方案三：

请问表格的响应式是哪段代码控制的啊？表格在手机上显示时有横向滚动条