<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://unpkg.com/bootstrap-table@1.18.3/dist/bootstrap-table.min.css" rel="stylesheet">
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://unpkg.com/bootstrap-table@1.18.3/dist/bootstrap-table.min.js"></script>
</head>
<body>
<div>
<span>工號:</span><input id="txtEmpNo" />
<span>姓名:</span><input id="txtEmpName" />
<button id="btnTest" οnclick="addOneData()">增加</button>
</div>
<div>
<table id="SignList" style="border: 1 solid black;">
</table>
</div>
<script>
$(function(){
loadData();
})
function initTable(){
$("#SignList").bootstrapTable('destroy').bootstrapTable({
columns:[[
{
title:"工號",
field:"empNo",
align:"center"
},
{
title:"姓名",
field:"empName",
align:"center"
},
{
title:"上移",
field:"empName",
align:"center",
formatter:function(value,row,index,field){
if(index>0){
return['<a href="javascript:void(0);" οnclick="upMove(\''+row.empNo+'\',\''+row.empName+'\')" >'+'上移'+'</a>'
].join('');
}
}
},
{
title:"下移",
field:"empName",
align:"center",
formatter:function(value,row,index,field){
if(index<myData.length-1){
return['<a href="javascript:void(0);" οnclick="downMove(\''+row.empNo+'\',\''+row.empName+'\')" >'+'下移'+'</a>'
].join('');
}
}
},
]]
})
}
var myData=[{"empNo":"F1","empName":"gs1"},{"empNo":"F2","empName":"gs2"},{"empNo":"F3","empName":"gs3"}];
function loadData(){
initTable();
console.log(myData);
$("#SignList").bootstrapTable('load',myData)
}
function upMove(pempno,pempname){
for(var i=0;i<myData.length;i++){
if(myData[i].empNo==pempno && myData[i].empName==pempname){
if(i>0){
myData.splice(i,1)
myData.splice(i-1,0,{"empNo":pempno,"empName":pempname})
loadData();
}
alert("當前位置:"+i);
break;
}
}
}
function downMove(pempno,pempname){
for(var i=0;i<myData.length;i++){
if(myData[i].empNo==pempno && myData[i].empName==pempname){
if(i<myData.length){
myData.splice(i,1)
myData.splice(i+1,0,{"empNo":pempno,"empName":pempname})
loadData();
}
alert("當前位置:"+i);
break;
}
}
}
function addOneData(){
var empNo=$("#txtEmpNo").val();
var empName=$("#txtEmpName").val();
var obj={"empNo":empNo,"empName":empName};
myData.push(obj);
loadData();
}
function getIndex(){
for(var i=0;i<myData.length;i++){
if(myData[i].empNo=="F2"){
myData.splice(i,0,{"empNo":"F4","empName":"gs4"})
loadData();
alert(i);
break;
}
}
}
</script>
</body>
</html>