Bootrap风格（父子）表格，基于ajax请求获取数据

最新推荐文章于 2023-09-26 17:19:11 发布

weixin_34234829

最新推荐文章于 2023-09-26 17:19:11 发布

阅读量207

点赞数

文章标签： json javascript ViewUI

原文链接：https://my.oschina.net/dxlmi/blog/1573125

版权

为什么80%的码农都做不了架构师？>>>

基于bootstrap风格的父子表格效果实现使用bootstrap-table

data.json
{
    "total": 11,
    "rows": [
        {
            "id": 0,
            "name": "Item 0",
            "price": "$0"
        },
        {
            "id": 1,
            "name": "Item 1",
            "price": "$1"
        },
        {
            "id": 2,
            "name": "Item 2",
            "price": "$2"
        },
        {
            "id": 3,
            "name": "Item 3",
            "price": "$3"
        },
        {
            "id": 4,
            "name": "Item 4",
            "price": "$4"
        },
        {
            "id": 5,
            "name": "Item 5",
            "price": "$5"
        },
        {
            "id": 6,
            "name": "Item 6",
            "price": "$6"
        },
        {
            "id": 7,
            "name": "Item 7",
            "price": "$7"
        },
        {
            "id": 8,
            "name": "Item 8",
            "price": "$8"
        },
        {
            "id": 9,
            "name": "Item 9",
            "price": "$9"
        },
        {
            "id": 10,
            "name": "Item 10",
            "price": "$10"
        }
    ]
}
demo.jsp
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="/TestDemo/assets/bootstrap/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="/TestDemo/assets/bootstrap/css/bootstrap-table.css" />
<script src="/TestDemo/assets/bootstrap/js/jquery-3.0.0.min.js" ></script>
<script src="/TestDemo/assets/bootstrap/js/bootstrap.min.js" ></script>
<script src="/TestDemo/assets/bootstrap/js/bootstrap-table.js" ></script>
<title>Insert title here</title>
</head>
<body>
	<table id="table-javascript" ></table>
	<button id="choose" >选择数据</button>
</body>
<script type="text/javascript">
$(function(){
	var detail;
	var queryUrl ="http://localhost:8080/TestDemo/json/data.json"
	    var table= $('#table-javascript').bootstrapTable({
	    	method:'get',
	    	url:queryUrl,
	    	columns:[{
	    		checkbox: true 
	    	},{
	    		field:'id',
	    		title:'主键'
	    	},{
	    		field:'name',
	    		title:'名称'
	    	},{
	    		field:'price',
	    		title:'价格',
	    		formatter:function(value,row,rowIndex){
	    			//return value+"%";
	    			return "<input type='text' value='"+value+"' />%";
	    		}
	    	},{
	    		title:'操作',
	    		formatter:function(value,row,rowIndex){
	    			//console.log(row);
	    			return '<a>删除</a>';
	    		}
	    	}],
	    	sidePagination: "server",
	    	  editable:true,
	    	 //search: false,
	    	 //striped: true
	    	 //pagination: true,
	    	 
            // singleSelect: false

             pageSize: 50,

             //pageList: [10, 50, 100, 200, 500]
             detailView:true,
             onExpandRow:function(index, row, $detail){
            	 detail=$detail;
            	 children($detail);
             }
	    })
	    
           var children=function($detail){
        	   		$($detail.html('<table></table>').find('table')).bootstrapTable({
            		  url:'http://localhost:8080/TestDemo/json/data.json',
            		  method:'get',
            		 //queryParams:{},
            		// detailView:true,
            		  clickToSelect: true,
            		  columns:[{
            			  checkbox: true 
            		  },{
            	    		field:'id',
            	    		title:'主键'
            	    	},{
            	    		field:'name',
            	    		title:'名称'
            	    	},{
            	    		field:'price',
            	    		title:'价格'
            	    	}],
            	    	sidePagination: "server"
            		 
          })
        }
	    $("#choose").click(function(){
	    	// var ss=new children(detail); 
	    	 var selectContent = table.bootstrapTable('getSelections'); 
	    	 if(typeof(selectContent) == 'undefined') { 
	    		 alert("请选择数据");
	    	 }else{
	    		 //JSON.stringify(selectContent);
	    		 var arr=jQuery.makeArray(selectContent)
	    		/* $.each(selectContent,function(i,n){
	    			 console.log(i+"_"+n);
	    		}) */
	    		console.log(arr);
	    	 }
	    })
})
</script>
</html>

转载于:https://my.oschina.net/dxlmi/blog/1573125