bootstrap 表格基于jqgrid学习

    先需要引用css, js

    <link href="../css/bootstrap.min.css" rel="stylesheet">

    <link href="../css/font-awesome.css" rel="stylesheet">

    <link href="../css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">

    <link href="../css/plugins/jqgrid/ui.jqgrid.css?0820" rel="stylesheet">

    <script src="../js/jquery.min.js?v=2.1.4"></script>

    <script src="../js/plugins/jqgrid/i18n/grid.locale-cn.js?0820"></script>

    <script src="../js/plugins/jqgrid/jquery.jqGrid.js?0820"></script>

  在写自己本地js

$(document).ready(function(){

           /*自适应屏幕大小*/
    $(window).resize(function(){
        $("#ksysylywsr_table").setGridWidth($('#toolbar').width()-1);
        $("#ksysylywsr_table").setGridHeight(sckj.getHeight()-204);　　　
    });

 $('#ksysylywsr_query').click(function(){

        $.getJSON(sckj.bandUrl("/sql/execute/1001", '2'), sckj.form("ksysylywsr_form"), function(data) {
                if(data.code == "1"){
                    loadData(data.rows);
                }else {
                    sweetAlert("友情提示", data.msg||'运行出错', "error");
                }
            });      

});

});

function loadData(pre_data){

       var $grid = $("#ksysylywsr_table");

    var columns=[
        {name: 'ord_div_cde',label: '科室code',align: 'center' ,frozen : true,hidden: true},
        {name: 'ord_doc_cde',label: '医生代码code',align: 'center' ,frozen : true,hidden: true},
        { name: 'ord_div_cdename',label: '科室',width:120,align: 'center',frozen : true,
            formatter:function(value,option,rows){
                var param=sckj.form("ksysylywsr_form");
                return "<a οnclick='laydilogBycode(\"1\",\""+param.ksrq+"\",\""+param.jsrq+"\",\""+param.mzzy+"\");' style='cursor:pointer;'>"+value+"</a>";
            }
        },
        { name: 'ord_doc_cdename',label: '医生',width:100,align: 'center',frozen : true,
            formatter:function(value,option,rows){
                if(!sckj.kong(rows.ord_doc_cde)){
                     var param=sckj.form("ksysylywsr_form");
                     return "<a οnclick='laydilogBycode(\"2\",\""+param.ksrq+"\",\""+param.jsrq+"\",\""+param.mzzy+"\",\""+rows.ord_doc_cde+"\");' style='cursor:pointer;'>"+value+"</a>";    
                }else{
                    return "<a href='javascript:void(0);'>"+sckj.kong(value,"未知")+"</a>";
                }
            }
        },
        {name: 'tot_amt',label: '小计',width:120,align: 'right',frozen : true, formatter:'currency', formatoptions:{defaultValue:""}}];

    var rst = sckj.rowToCol(pre_data, ['ord_div_cde','ord_doc_cde','ord_div_cdename', 'ord_doc_cdename'], 'acc_clas_cde', 'tot_amt');
    $.each(rst.cols, function(i, v) {
        columns.push({name:v, label:v, width:100,align: 'right', sortable:false, formatter:'currency', formatoptions:{defaultValue:""}});
    });

    $.jgrid.defaults.styleUI = 'Bootstrap';
    var height = sckj.getHeight()-204;

    var _opts = {
        altRows:true,
        datatype: "local",
        loadui : "block",
        viewrecords : true,
        width:sckj.getWidth()-60,
        height:height,
        hidegrid: false,
        // multiSelect:opts.singleSelect,
        colModel: columns,
        // data:d,
        autowidth: false,//必须要,否则没有水平滚动条
        autoScroll: true,
        rownumbers : true,
        rowNum: 9999,
        emptyrecords : '无记录',
        caption: '科室医生医疗业务收入',
        shrinkToFit:false,
        footerrow:true,
        // grouping:true,
        // groupingView : {
        //     groupField : ['ord_div_cde']
        // },
        pagination: false, //在表格底部显示分页工具栏
        gridComplete: function (data) {
            sckj.endAnimate("ksysylywsr_query");
            //sckj.hideloading('ksysylywsr_query');     //关闭loading效果
            sckj.Merger('ksysylywsr_table', 'ord_div_cdename');
        }};

    var jqgrid = $grid.jqGrid(_opts);

    $grid.jqGrid('setFrozenColumns');
    //增加小计
    $.each(rst.rows, function(i, v) {
        var tot_amt = 0;
        $.each(rst.cols, function(i, c) {
            tot_amt += Number(v[c]||'0');
        });

        v.tot_amt = tot_amt;
    });

    //增加合计
    $grid.setGridParam({data: rst.rows}).trigger('reloadGrid');
    var subTotal=$grid.getCol("tot_amt",false,"sum");
    var sumRow = {ord_doc_cdename:'合计：', tot_amt:subTotal};
    $.each(rst.cols, function(i, v) {
        sumRow[v] = $grid.getCol(v,false,"sum");
    });

    $grid.footerData('set', sumRow); //将合计值显示出来

    //处理jqgrid不支持冻结合计列的问题
    var $content = $("div.ui-jqgrid-hbox>table.ui-jqgrid-ftable");
    $("div.frozen-sdiv>table.ui-jqgrid-ftable").find("td").each(function(){
        $(this).text($content.find("td[aria-describedby='"+$(this).attr("aria-describedby")+"']").eq(0).text());
    });

    addBtnToCaption();
}

}