修改和添加关于数据库的信息,可以用于任何的添加和修改
这些数据库和前面的随笔数据库是一样的
一、显示出数据库中的信息
(1)显示的效果也可以是用bootstrap的标签页显示(前面一定要引入bootstrap)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
< ul id="myTab" class="nav nav-tabs"> < li class="active" style=" font-size:30px" >< a href="#home" data-toggle="tab"> 饭面类</ a > </ li > < li style=" font-size:30px">< a href="#ios" data-toggle="tab">特色小吃</ a ></ li > < li class="dropdown" style=" font-size:30px"> < a href="#" id="myTabDrop1" class="dropdown-toggle"data-toggle="dropdown">酒水饮品 < b class="caret"></ b > </ a > < ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1" style=" font-size:25px"> < li >< a href="#jmeter" tabindex="-1" data-toggle="tab"> 酒水</ a > </ li > < li >< a href="#ejb" tabindex="-1" data-toggle="tab"> 饮品</ a > </ li > </ ul > </ li > </ ul > |
二、修改内容
(1)标题显示之后,就是每一个标题中的内容了,可以用ajax遍历
1
2
3
|
<p id= "mian" > </p> |
(2)进行数据库遍历
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
$.ajax({ url: "mianlei.php" , //编写处理页面 dataType: "TEXT" , success: function (d){ var hang = d.split( "|" ); //拆分字符“|”串:显示行 var str = "" ; for ( var i=0;i<hang.length;i++) { var lie = hang[i].split( "^" ); //拆分字符串“^”:显示列 str += "<input type='button' value='" +lie[2]+ "' class='aa1' code='" +lie[1]+ "' data-toggle='modal' data-target='#myModal'/> " ; } $( "#mian" ).html(str); //把遍历的内容写在上面的 } }) |
(3)处理页面的编写如下
1
2
3
4
5
6
|
<?php include ( "DBDA.php" ); //调用封装好的数据库类 $db = new DBDA(); $sql = "select * from caidan where fcode =('1101')" ; //查询符合父级号的所有信息 echo $db ->StrQuery( $sql ); //输出结果 |
(4)然后进行修改的内容可以用模态框
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
< div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> < div class="modal-dialog"> < div class="modal-content"> < div class="modal-header"> < button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</ button > < h4 class="modal-title" id="myModalLabel">修改</ h4 > </ div > < div class="modal-body" id="content"> <!--这里是显示的修改的内容--> </ div > < div class="modal-footer"> < button type="button" class="btn btn-default" data-dismiss="modal">关闭</ button > < button type="button" class="btn btn-primary" id="tijiao">提交</ button > </ div > </ div > <!-- /.modal-content --> </ div > <!-- /.modal --> </ div > |
(5)修改的时候,里面要默认显示原来的名字和价格,所以要将前面遍历的代号传过来
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
$( ".aa1" ).click( function (){ var code = $(this).attr( "code" ); //找到code值 $.ajax({ url: "xiugaichuli.php" , //编写处理页面 data:{c:code}, //将code值传过去 type: "POST" , dataType: "TEXT" , success: function (d){ var hang = d.split( "|" ); //拆分字符“|”串:显示行 var str = "" ; for ( var i=0;i<hang.length;i++) { var lie = hang[i].split( "^" ); //拆分字符串“^”:显示列 str += "<div>名称:<input type='text' value='" +lie[2]+ "' code='" +lie[1]+ "' class='name' /></div><br /><div>价格:<input type='text' value='" +lie[0]+ "' code='" +lie[1]+ "' class='price' /></div>" ; } $( "#content" ).html(str); //写入模态框中的content的位置 } }) }) |
(6)单击提交按钮后写入数据库,并且这里也修改了,单击提交按钮进行修改
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
$( "#tijiao" ).click( function (){ var code = $( ".name" ).attr( "code" ); //找到名称中的代号 var code = $( ".price" ).attr( "code" ); //找到价格的代号 var name = $( ".name" ).val(); //找到名称的值 var price = $( ".price" ).val(); //找到价格的值 $.ajax({ url: "tjsk.php" , //处理页面的编写 data:{n:name,p:price,c:code}, //将值传到处理页面 type: "POST" , dataType: "TEXT" , success: function (data){ ///处理页面成功后输出 if (data.trim()== "ok" ) { alert( "修改成功!" ); } } }) }) |
三、添加内容
(1)同上面的写一个弹框,里面有文本框
1
|
<div id= "tianjia" data-toggle= 'modal' data-target= '#myModall' >添加菜品</div> |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<div class = "modal-content" > <div class = "modal-header" > <button type= "button" class = "close" data-dismiss= "modal" aria-hidden= "true" >×</button> <h4 class = "modal-title" id= "myModalLabel" >添加菜品</h4> </div> <div class = "modal-body" id= "content" > <div id= "name" >名称:<input type= "text" id= "ming" /></div> <br /> <div id= "price" >价格:<input type= "text" id= "jia" /></div> </div> <div class = "modal-footer" > <button type= "button" class = "btn btn-primary" id= "tijiao1" >提交</button> </div> </div> |
(2)填写信息后,单击提交按钮写入数据库
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
$( "#tijiao1" ).click( function (){ var n = $( "#ming" ).val(); //找到名称文本框的值 j = $( "#jia" ).val(); //找到价格文本框的值 $.ajax({ url: "tianjia.php" , //编写处理页面 data:{n:n,j:j}, //将值传过去 type: "POST" , dataType: "TEXT" , success: function (d){ if (d.trim()== "ok" ) { alert ( "添加成功!" ); } window.location.href= "xiugaicanpin.php" ; } }) }) |
(3)处理页面的编写
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<?php include ( "DBDA.php" ); $db = new DBDA(); $n = $_POST [ "n" ]; //将传来的值接收 $j = $_POST [ "j" ]; $sql = " select max(code) from caidan where fcode='1101' " ; //查找这个父级代号的最大代号 $attr = $db ->Query( $sql ); foreach ( $attr as $v ) { $c = $v [0]+1; //使最大值加1 $sqll = " insert into caidan values('{$j}','{$c}','{$n}','1101','','','')" ; //写入数据库 $db ->Query( $sqll ,0); echo "ok" ; } ?> |
(4)添加结束后看下结果
到此,结束了,简单的添加和修改的功能,后面还要增加删除功能~~