<!DOCTYPE html>
<html>
<head>
<title>insertRow</title>
<meta charset="utf-8">
<link rel="stylesheet" href="../assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="../assets/bootstrap-table/src/bootstrap-table.css">
<link rel="stylesheet" href="../assets/examples.css">
<link rel="stylesheet" href="select2-4.0.3/dist/css/select2.css" />
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script src="../assets/bootstrap/js/bootstrap.min.js"></script>
<script src="../ga.js"></script>
</head>
<body>
<div class="container">
<h1>insertRow</h1>
<p>
Insert a new row, the param contains following properties:<br> index: the row index to insert into.<br> row: the row data.<br>
<code>$table.bootstrapTable('insertRow', {index: 1, row: row});</code>
</p>
<div id="toolbar">
<button id="button" class="btn btn-default">insertRow</button>
</div>
<table id="table" data-toggle="table" data-toolbar="#toolbar" data-height="428" data-url="../json/data1.json">
<thead>
<tr>
<th data-field="id">ID</th>
<th data-field="name">Item Name</th>
<th data-field="price">Item Price</th>
</tr>
</thead>
</table>
</div>
<script type="text/javascript" src="select2-4.0.3/dist/js/select2.js"></script>
<script type="text/javascript" src="select2-4.0.3/dist/js/select2.full.js"></script>
<script src="../assets/bootstrap-table/src/bootstrap-table.js"></script>
<script>
var $table = $('#table'),
$button = $('#button');
var flag = 1;
function c() {
var v = event.target.value;
var n = event.target.name;
$table.bootstrapTable('getOptions').data[0][n] = v;;
}
$button.click(function() {
var randomId = 100 + ~~(Math.random() * 100);
var b = [
"id", "name", "price"
]
$table.bootstrapTable('insertRow', {
index: 0,
row: {
}
});
var td = $("#table tr:first-child>td");
for(var i = 0; i < td.length; i++) {
if(i == td.length - 1) {
$(td[i]).html('<div><select type="text" class="span-detail-default" id="detail_abtest_user"><option selected="selected">222</option></select></div>')
a();
} else {
$(td[i]).html('<div><input type="text" value="" name="' + b[i] + '" onchange=\'c(event)\'/></div>')
}
}
});
function a() {
$("#detail_abtest_user").select2({
width: '300',
placeholder: "请选择一个姓名", //文本框的提示信息
ajax: {
url: "json/data2.json",
dataType: 'json',
delay: 250,
data: function(params) { //params为搜索对象
return {
name: params.term, //传给后台需要搜索的值
};
},
processResults: function(data) { //data为后台返回的数据
return {
results: data.data //加载的数据，格式要求为[{},{},{}]
};
},
cache: true
},
escapeMarkup: function(markup) {
return markup;
},
minimumInputLength: 1,
templateResult: formatRepo,
templateSelection: formatRepoSelection
});
function formatRepo(item) {
item.text = item.name;
item.id = item.id + 1; //远程数据的如果要初始化显示数据，一定要赋值改变id号，否则初始值后第一个加载出来的数据点击后会显示成初始值
item.oa = item.name + "(" + item.oa + ")"; //远程加载的数据显示情况
return item.oa; //这里的与下面函数是对应
}
function formatRepoSelection(repo) {
repo.selected = true;
return repo.text; //选则加载列表中某一项时显示的内容
}
}
</script>
</body>
</html>
- 1
- 2
- 3
- 4
前往页