bootgrid

編寫bootgrid前提條件 
 有關bootgrid的.css和.js庫文件
 參數：ajax:   必須設置為true
  post:   傳遞給Java的參數
  url:   與java連接的方法名
  formatters:  在html中自定義屬性名，然后在這顯示按鈕或者圖片的html文
  navigation:  表的樣式，0，1，2有表尾，3有表頭和表尾
  rowSelect :  true,selection : true,這兩個屬性可以時列表可以被選擇
  rowCount:  一個頁面上最多顯示的記錄條數
  responseHandler:可以在這里設置頁面上的返回數據的形式，內容
  tempaltes:  設置表的樣式，對表的表頭或者表腳
  label:   設置提示信息的內容
 頁面加載完成后：
 on('loaded.rs.jQuery.bootgrid',function(){})

 

jsp:

<table id="grid" class="table">
        <thead>
            <tr>
                <th data-column-id="userId">用戶ID</th>
                <th data-column-id="userName">用戶姓名</th>
                <th data-column-id="userSubmit" data-formatter="command">操作</th>
            </tr>
        </thead>
    </table>

js:

$(function(){
        $('#grid').bootgrid({
            //必須設置
            ajax:true,
            //傳遞的參數
            post:function(){
                return{
                    deleteFlg : 1,
                }
            },
            navigation:3,
            templates:{
                //表頭左邊顯示提示信息
                header : "<div id=\"{{ctx.id}}\" class=\"{{css.header}}\"><div class=\"row\">"
                    + "<p class=\"{{css.infos}}\"></p></div></div>",
                //表腳右邊顯示分頁
                footer : "<div id=\"{{ctx.id}}\" class=\"{{css.footer}} text-right\"><div class=\"row\">"
                    + "<p class=\"{{css.pagination}}\"></p></div></div>",
                //對表頭的每個項目添加的圖標
                icon : "<div id=\"{{ctx.iconCss}}\" class=\"{{css.icon}} table-color text-right\">"
                    + "<span class=\"glyphicon glyphicon-sort\"></span></div>"
            },
            labels: {
                all: "全部",
                //表頭左邊顯示提示信息
                infos: "顯示{{ctx.start}}～{{ctx.end}}條， 總{{ctx.total}}條",
                loading: "加載中...",
                noResults: "沒有相關數據",
                refresh: "刷新中...",
                search: "查詢中..."
            },
            
            //與java連接的口
            url:"initUser.do",
            //html中與data-data-formatter相連
            formatters:{
                //其中row為從java返回值的每行數據
                "command":function(column,row){
                    //在操作這一列顯示的東西----data-row-id為自定義屬性------row.id其中id為java返回行中的一個屬性值id
                    return "<button class=\"btn\" data-row-id="+row.id+">查看</button>";
                }
            },
            //data為從java返回的所有數據
            responseHanlder:function(data){
                
            }
            //頁面加載完成后的加載
        }).on("loaded.rs.juqery.bootgrid",function(){
            //在formatters中自定義屬性data-row-id的值
            alert(11);
            alert($(this).data("row-id"));
        })
    });

 

http://blog.csdn.net/xiaohai_ada/article/details/52702581