关闭

jquery实现json数据填充到table表格中并且实现remove add 数据

标签: web前端jquery
4755人阅读 评论(0) 收藏 举报
分类:

题记:最近做关于OpenDaylight的项目,然还用到了一些前端和javaee的相关技术,本代码实现的是通过数据库部分读到的json数据,数据库部分没有写出,填充到table表格中,并且也可以实现table表格中用户自行进行增删等操作,主要是jquery、js.列出但是参考的资料:http://www.cnblogs.com/lxblog/archive/2013/01/11/2856582.html  

http://hmkcode.com/jquery-each-json/

1html部分 注意js的链接地址,还有jquery版本,jquery如果用1.11.1版本的话,程序运行

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="hongwei">

    <link href="Scripts/bootstrap.min.css" rel="stylesheet">
    <link href="Scripts/bootstrap-theme.min.css" rel="stylesheet">
<title>Device Mangement</title>
</head>
<body>
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
   <script src="Scripts/bootstrap.min.js"></script>
   <script src="devicetable77.js"></script>
   <script type="text/javascript" src="Scripts/zDrag.js"></script>
   <script type="text/javascript" src="Scripts/zDialog.js"></script>
<h1> Device management</h1>
<body>
 <table id="table" class="table table-striped table-bordered table-hover">
     <tr>
       <th><input id="ckbAll" type="checkbox" /></th>
       <th>IP</th>
       <th>Group</th>
     </tr>
 </table>
 <input id="removebtn" class="btn btn-default" type="button" value="remmove">
 <input id="addbtn" class="btn btn-default" type="button" value="add">
 <input id="getbtn" class="btn btn-default" type="button" value="get">
 <div class="item">
    <input type="text" id="getval1" value="输入的数据"/>
	<input type="text" id="getval2" value="输入的数据"/>
    <br/>
</div>
</body> 
</html>

2 js部分

  这部分主要实现了几个函数,注意each函数的用法,并且index是从0开始的,注意字符串的拼接,以及双引号嵌套的使用。js或者html中要求是,“  ‘ ’  ” 双引号中是单引号,还有就是向checkbox的id作为一个变量的用法应。其中感觉比较重要的是通过一个json字符串给table显示。(变量一定要“+xx+”v这种形式)
 $("#table").append($('<tr/>')
.append($('<td/>').html("<input id='check"+index+"' type='checkbox' />"))
.append($('<td/>').html(article.ip))
   .append($('<td/>').html(article.group))
</pre></div><div><pre name="code" class="javascript">$(document).ready(function () {
     //function refreshTable()
	var articles = [
        { 
            "ip":"80.4.2.59",
            "group":"A"
        },
        {
            "ip":" 80.4.2.58 ",
            "group":"B"
        },
		{
            "ip":" 10.75.199.244 ",
            "group":"C"
        }
    ];
    // 1. remove all existing rows
    $("tr:has(td)").remove();
    // 2. get each article //遍历article中的每一个元素
    $.each(articles, function (index, article) {
        // 2.1 Create table column for group
        // 2.2 Create a new row and append 3 columns (ip+url, group, tags)
        $("#table").append($('<tr/>')
				.append($('<td/>').html("<input id='check"+index+"' type='checkbox' />"))
				.append($('<td/>').html(article.ip))
			    .append($('<td/>').html(article.group))
        );  
    });              
	$("#removebtn").bind("click", delOneRow);
    $("#addbtn").bind("click", insertRowLast),
    $("#getbtn").bind("click", getRowlValue),
    $("#table tr:gt(0) td:first-child input:checkbox").bind("click",checkOne);
});
var c=-1;
function checkOne() { //this return is which checkbox is checked
    var allBox = $(":checkbox"); //only choose one
    allBox.click(function () {
        allBox.removeAttr("checked");
        $(this).attr("checked", true);
        });
	var i = $("#table tr:gt(0) td:first-child input:checkbox").length;
    c = -1;
    var j=0;
    $("#table tr:gt(0) td:first-child input:checkbox").each(function () {
    	j+=1;
		if ($(this).attr("checked")==true) {
            //c += 1;//only select one,c is number of select
            var q=1;
			while(i--){
				if(j==q){
				c=j-1;
				return false;
				}
				q++;
			}
         }
     });
}
function delOneRow() {
	//checkOne();//which row
	if(c!=-1)
	{
		$("#table tr:gt(0):eq("+c+")").remove();
	}
}
 function insertRowLast() {
    var diag = new Dialog();
	diag.Title = "please input device information";
	diag.URL = "testeject.html";
	diag.OKEvent = function(){
	var ip = diag.innerFrame.contentWindow.document.getElementById('ip').value;
	var group = diag.innerFrame.contentWindow.document.getElementById('group').value; 
	var newRow = "<tr><td><input id='check10' type='checkbox'/></td><td>"+ip+"</td><td>"+group+"</td></tr>";
	$("#table tr:last").after(newRow);
	diag.close();
	};
	//after click ok,oKEvent will be run 
	diag.show();
	var doc=diag.innerFrame.contentWindow.document;
	doc.open();
	doc.write('<html><body>I   P<input id="ip" type="text"/> </br> </br> </br>Group<input id="group" type="text"/></body></html>');
	doc.close();
} 
function getRowlValue() {
    var v = "";
    //$("#table tr:gt(0):eq(1) td").each(function () {
	if(c!=-1)
	{
		$("#table tr:gt(0):eq("+c+") td").each(function () {    
		v += $(this).text() + " ";
		});
	alert(v);
	}
	
}

3 diag 部分已经在上面代码写出来,这部分写的不好,希望可以用bootstrap再加工下

附录:工程下载链接地址:点击打开链接 ,注意有几个html文件,最终调试的是device777.html
4 后来在项目中调试后的是以下的代码部分,增加了模态框并且和服务器通信也成功:
html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="haofan">
<link href="../../dist/css/bootstrap.min.css" rel="stylesheet">
<link href="../../dist/css/bootstrap-theme.min.css" rel="stylesheet">
<title>Device Mangement</title>
</head>
<br>
<br>
<br>
<body>
	<script type="text/javascript">
     function loadNavBar(){
        var req = new XMLHttpRequest();
        req.open("GET", "../navbar.html", false);
        req.send();
        document.write(req.responseText);
     }
     loadNavBar();
   </script>
	<script src="../../libraries/jquery/jquery-1.11.1.min.js"></script>
	<script src="../../dist/js/bootstrap.min.js"></script>
	<script src="../../libraries/jquery/jquery-ui.min.js"></script>
	<script type="text/javascript" src="Scripts/devicetableever.js"></script>
<body>
	<table id="table"
		class="table table-striped table-bordered table-hover">
		<tr>
			<th></th>
			<th>Name</th>
			<th>IP</th>
			<th>Group</th>
		</tr>
	</table>
	<input id="removebtn" class="btn btn-default" type="button"
		value="remmove">
	<button id="addbtn" class="btn btn-default" type="button">add</button>
	<button id="editbtn" class="btn btn-default" type="button">edit</button>
	<input id="getbtn" class="btn btn-default" type="button" value="get">
	<div id="errro-msg"></div>
	<!-- modal remove -->
	<div class="modal" id="modaledit" tabindex="-1" role="dialog"
		aria-labelledby="mySmallModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">
						<span aria-hidden="true">×</span><span class="sr-only">Close</span>
					</button>
					<h4 class="modal-title">Edit Rfswitch Information</h4>
				</div>
				<div class="modal-body">
					<form class="form-horizontal" role="form">
						<div class="form-group">
							<label for="inputname2" class="col-sm-2 control-label">Name</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" id="inputeditname">
							</div>
						</div>
						<div class="form-group">
							<label for="inputip2" class="col-sm-2 control-label">IP</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" id="inputeditip"
									readonly="readonly">
							</div>
						</div>
						<div class="form-group">
							<label for="inputgroup2" class="col-sm-2 control-label">Group</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" id="inputeditgroup">
							</div>
						</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">close</button>
					<button type="button" class="btn btn-primary" id="editsubmitbutton">submit</button>
				</div>
			</div>
		</div>
	</div>
	<!-- modal add -->
	<div class="modal" id="modaladd" tabindex="-1" role="dialog"
		aria-labelledby="mySmallModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">
						<span aria-hidden="true">×</span><span class="sr-only">Close</span>
					</button>
					<h4 class="modal-title">Add Rfswitch Information</h4>
				</div>
				<div class="modal-body">
					<form class="form-horizontal" role="form">
						<div class="form-group">
							<label for="inputname1" class="col-sm-2 control-label">Name</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" id="inputaddname"
									placeholder="please input rfswitch name">
							</div>
						</div>
						<div class="form-group">
							<label for="inputip1" class="col-sm-2 control-label">IP</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" id="inputaddip"
									placeholder="please input rfswitch ip">
							</div>
						</div>
						<div class="form-group">
							<label for="inputgroup1" class="col-sm-2 control-label">Group</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" id="inputaddgroup"
									placeholder="please input rfswitch group">
							</div>
						</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">close</button>
					<button type="button" class="btn btn-primary" id="addsubmitbutton">submit</button>
				</div>
			</div>
		</div>
	</div>

</body>
</html>

4 js部分:
window.onload=function(){
	//var articles = getAllDbdata();
	getAllDbdata();	
    $("#removebtn").bind("click", delOneRow);
    $("#addbtn").bind("click", insertRowLast),
    $("#getbtn").bind("click", getRowlValue),
    $("#editbtn").bind("click", editRowlValue),
    $("#table tr:gt(0) td:first-child input:checkbox").bind("click",checkOne);
};
function getAllDbdata(){
	$("#error-msg").empty();
	var query = JSON.stringify(getQueryInput("get","","",""));
    var get = sendReq("/device/GetDB", query);
    if (get == null){
    	 $("#errro-msg").html('<div class="alert alert-danger alert-dismissible" role="alert">'+
 				'<button type="button" class="close" data-dismiss="alert" aria-label="Close">'+
 				'<span aria-hidden="true">×</span></button><strong>insert database!</strong></div>');
    	return;
    }
    var articles1 = get.resultDB;////articles:"[{},{}]" must use eval to [{},{}]
    var articles = JSON.parse(articles1);//both this method and eval() can run  
    //var articles = eval(articles1);//very important.
   //var articles = [{ "name" : "rfswitch1" , "ip" : "80.4.2.59" , "group" : "A"}, { "name" : "rfswitch2" , "ip" : "10.75.199.244" , "group" : "B"}, { "name" : "rfswitch3" , "ip" : "10.75.192.15" , "group" : "B"}, { "name" : "rfswitch2" , "ip" : "192.168.1.3" , "group" : "A"}, { "name" : "frank" , "ip" : "192.168.1.0" , "group" : "frank"}, { "name" : "frank1" , "ip" : "192.168.1.0" , "group" : "frank1"}, { "name" : "frank2" , "ip" : "198.189" , "group" : "C"}, { "name" : "rfswich4" , "ip" : "192.168.1.9" , "group" : "D"}, { "name" : "rfswitch4" , "ip" : "192.168.1.9" , "group" : "D"}, { "name" : "rfswitch3" , "ip" : "192.168.1.9" , "group" : "D"}];
    $("tr:has(td)").remove();
    // 2. get each article
    $.each(articles, function (index, article) {
        // 2.1 Create table column for group
        // 2.2 Create a new row and append 3 columns (ip+url, group, tags)
        $("#table").append($('<tr/>')
				.append($('<td/>').html("<input id='check"+index+"' type='checkbox' />"))
				.append($('<td/>').html(article.name))			
				.append($('<td/>').html(article.ip))
			    .append($('<td/>').html(article.group))
        );  
    });
}
var c=-1;
function checkOne() { //this return is which checkbox is checked
    var allBox = $(":checkbox"); //only choose one
    allBox.click(function () {
        allBox.removeAttr("checked");
        $(this).prop("checked", true);
        });
	var i = $("#table tr:gt(0) td:first-child input:checkbox").length;
    c = -1;
    var j=0;
    $("#table tr:gt(0) td:first-child input:checkbox").each(function () {
    	j+=1;
		if ($(this).is(":checked")==true) { //low jquery: attr("checked")
            //c += 1;//only select one,c is number of select
            var q=1;
			while(i--){
				if(j==q){
				c=j-1;
				return false;
				}
				q++;
			}
         }
     });
}
function delOneRow() {
	//checkOne();//which row
	//
	if(c!=-1)
	{
		var arraystr = getRowlValue();
		var name = arraystr[1];
		var ip = arraystr[2];
		var group = arraystr[3];
		var query = JSON.stringify(getQueryInput("remove",name,ip,group));
        var get = sendReq("/device/RemoveDB", query);
        if(get.msg == "failed")
        {
        	  $("#errro-msg").html('<div class="alert alert-danger alert-dismissible" role="alert">'+
      				'<button type="button" class="close" data-dismiss="alert" aria-label="Close">'+
      				'<span aria-hidden="true">×</span></button><strong>failed, </strong>'+get.msg+'</div>');
        	  return;
        }
		//$("#table tr:gt(0):eq("+c+")").remove();
 	   window.location.reload();
	}
}
 function insertRowLast() {
		  $("#modaladd").modal("toggle");
    		$("#modaladd").draggable({
    		    handle: ".modal-header"
    		});
		  $("#addsubmitbutton").click(function(){
	            var query = JSON.stringify(getQueryInput("add","","",""));
	            var get = sendReq("/device/AddDB", query);
	            if (get == null){
	            	return;
	            }
	            if(get.msg != ""){
	            	   $("#errro-msg").html('<div class="alert alert-danger alert-dismissible" role="alert">'+
	            				'<button type="button" class="close" data-dismiss="alert" aria-label="Close">'+
	            				'<span aria-hidden="true">×</span></button><strong>failed, </strong>'+get.msg+'</div>');
		        	   $('#modaladd').modal('hide');
	            	   return;
	           }
	           if(get.msg == ""){
	        	   $('#modaladd').modal('hide');
		            //getAllDbdata();
	        	   window.location.reload();
	           }
	           return;
	      });
}
function editRowlValue() {
	if(c!= -1){
		var arraystr = getRowlValue();
		$("#inputeditname").val(arraystr[1]);
		$("#inputeditip").val(arraystr[2]);
		$("#inputeditgroup").val(arraystr[3]);
		$("#modaledit").modal("toggle");
		$("#modaledit").draggable({handle: ".modal-header"});//must import jquery-ui.min.js,let modal drag
		 $("#editsubmitbutton").click(function(){
			var name = $("#inputeditname").val();
			var ip = $("#inputeditip").val();
			var group = $("#inputeditgroup").val();
			 var query = JSON.stringify(getQueryInput("edit",name,ip,group));
	          var get = sendReq("/device/EditDB", query);
	          if (get == null){
	          	return;
	          }
	          if(get.msg != ""){
	          	   $("#errro-msg").html('<div class="alert alert-danger alert-dismissible" role="alert">'+
	          				'<button type="button" class="close" data-dismiss="alert" aria-label="Close">'+
	          				'<span aria-hidden="true">×</span></button><strong>failed, </strong>'+get.msg+'</div>');
		        	   $('#modaledit').modal('hide');
	          	   return;
	         }
	         if(get.msg == ""){
	      	   $('#modaledit').modal('hide');
        	   window.location.reload();
	         }
	         return;
	    });	
	}
}
function getRowlValue() {
    var v = "";
    //$("#table tr:gt(0):eq(1) td").each(function () {
	if(c!=-1)
	{
		$("#table tr:gt(0):eq("+c+") td").each(function () {    
		v += $(this).text() + " ";
		});
	}
	var fenstr = v.split(" ");
	return fenstr;
	
}
function getQueryInput(type,name,ip,group) {
    var input = {
            "name" : null,
            "ip" : null,
            "group" : null
        };
    if(type == "add"){
    	input["name"] = $("#inputaddname").val();
        input["ip"] = $("#inputaddip").val();
        input["group"] = $("#inputaddgroup").val();
    }
    if(type == "remove"){
       	input["name"] = name;
        input["ip"] = ip;
        input["group"] = group;
    }
    if(type == "edit"){
       	input["name"] = name;
        input["ip"] = ip;
        input["group"] = group;
    }
    return { "input" : input };
}
function sendReq(url, query) {
    var req = new XMLHttpRequest();
    req.open("POST", url, false);
    req.setRequestHeader("Content-type","application/json");
    req.send(query.toString());
    if(req.responseText == ""){
    	return null;
    }
    var get_response = jQuery.parseJSON(req.responseText).output;
    return get_response;
}



0
2

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:89394次
    • 积分:1476
    • 等级:
    • 排名:千里之外
    • 原创:56篇
    • 转载:5篇
    • 译文:0篇
    • 评论:16条
    最新评论