通过jqGrid书写表格，查询的数据进行列表展示

第一步：jsp页面

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<script src="<%=request.getContextPath() %>/static/pages/js/bgmList.js?v=1.0.0.2" 
	type="text/javascript"></script>

	<!-- BEGIN PAGE HEADER-->
	<!-- BEGIN PAGE BAR -->
	<div class="page-bar">
	    <ul class="page-breadcrumb">
	        <li>
	            <span>首页</span>
	            <i class="fa fa-circle"></i>
	        </li>
	        <li>
	            <span>bgm管理</span>
	            <i class="fa fa-circle"></i>
	        </li>
	        <li>
	            <span>背景音乐列表展示</span>
	        </li>
	    </ul>
	</div>
	<!-- END PAGE BAR -->
	<!-- END PAGE HEADER-->
                        
	<div class="row">
    	<div class="col-md-12">
                   
			<div class="bgmList_wrapper">
                <table id="bgmList"></table> 
    			<div id="bgmListPager"></div>
             </div>
             
		</div>
	</div>

第二步：相关页面js的书写

var deleteBgm = function(bgmId) {
	
	var flag = window.confirm("是否确认删除？？？");
	if (!flag) {
		return;
	}
	
	$.ajax({
		url: $("#hdnContextPath").val() + '/video/delBgm.action?bgmId=' + bgmId,
		type: "POST",
		success: function(data) {
			if (data.status == 200 && data.msg == 'OK') {
				alert('删除成功~~');
				var jqGrid = $("#bgmList");  
				jqGrid.jqGrid().trigger("reloadGrid");//刷新前端页面
			}
		}
	})
}






var BgmList = function() {

	// 构建bgm列表对象
    //第三步在这里
    var handleBgmList = function() {
    	
    	// 上下文对象路径
		var hdnContextPath = $("#hdnContextPath").val();
		var bgmServer = $("#bgmServer").val();
		
		
		var jqGrid = $("#bgmList");  
        jqGrid.jqGrid({  
            caption: "所有bgm列表", 
            url: hdnContextPath + "/video/queryBgmList.action",  
            mtype: "post",  
            styleUI: 'Bootstrap',//设置jqgrid的全局样式为bootstrap样式  
            datatype: "json",  
            colNames: ['ID', '歌曲名称','作者', '保存路径', '操作'],  
            colModel: [  
                { name: 'id', index: 'id', width: 30 },  
                { name: 'author', index: 'author', width: 20 },
                { name: 'name', index: 'name', width: 30 },
                { name: 'path', index: 'path', width: 50, 
                	formatter: function(cellvalue, option, rowObject){
                		
                		var src = bgmServer + cellvalue;
                		var html = "<a href='" + src + "' target='_blank'>点我播放</a>"
                		
                		return html;
                	}
                },
                { name: '', index: '', width: 50, 
                	formatter: function(cellvalue, option, rowObject){
                		
                		var html = '<button class="btn btn-outline blue-chambray" id="" onclick=deleteBgm("' + rowObject.id + '") style="padding: 1px 3px 1px 3px;">删除</button>';
                		
                		return html;
                	}
                }
            ],  
            viewrecords: true,  		// 定义是否要显示总记录数
            rowNum: 10,					// 在grid上显示记录条数，这个参数是要被传递到后台
            rownumbers: true,  			// 如果为ture则会在表格左边新增一列，显示行顺序号，从1开始递增。此列名为'rn'
            autowidth: true,  			// 如果为ture时，则当表格在首次被创建时会根据父元素比例重新调整表格宽度。如果父元素宽度改变，为了使表格宽度能够自动调整则需要实现函数：setGridWidth
            height: 400,				// 表格高度，可以是数字，像素值或者百分比
            rownumWidth: 36, 			// 如果rownumbers为true，则可以设置行号 的宽度
            pager: "#bgmListPager",		// 分页控件的id  
            subGrid: false				// 是否启用子表格
        }).navGrid('#bgmListPager', {
            edit: false,
            add: false,
            del: false,
            search: false
        });
        
        
        // 随着窗口的变化，设置jqgrid的宽度  
        $(window).bind('resize', function () {  
            var width = $('.bgmList_wrapper').width()*0.99;  
            jqGrid.setGridWidth(width);  
        });  
        
        // 不显示水平滚动条
        jqGrid.closest(".ui-jqgrid-bdiv").css({ "overflow-x" : "hidden" });
    	
    }
    
    return {
        //第二步在这里
        init: function() {
        	handleBgmList();
        }

    };

}();

//第一步在这里
jQuery(document).ready(function() {
	BgmList.init();
});