用jquery实现隐藏列表表单的显示关闭切换以及Ajax方式改动提交相应的那一行的改动内容。

请勿盗版,转载请加上出处http://blog.csdn.net/yanlintao1

请勿盗版,转载请加上出处http://blog.csdn.net/yanlintao1

先给大家看看图片效果,大家不要直接复制代码,这样是执行不了的,由于你们数据库和我的不一样,可是你们能够自己读读这个代码。找找对自己实用的,当然我的方法也不是最好的希望大家能够给点意见。感激不尽。

(1)点击改动图标

(2)填写改动内容

(3)点击确定改动

jquery与css代码:

<style type="text/css">
.open{
	display:block;
}
.close{
	display:none;
}
</style>
<script language="javascript">
$(function(){

	//监听改动,实现显示关闭之间的切换
	$("tr").delegate("td[id='modify']","click",function(){
	      var id  = $(this).attr('name');
		  $("#"+id).toggleClass("close");
	});

	//监听改动的确认改动button,并以ajax方式提交
	$("td").delegate("input[name='update[]']","click",function(){
		var id=$(this).parent().parent().attr('name');
		var student_id1=$("input[name='student_id1']").map(function(){return $(this).val()}).get();
		var date1=$("input[name='date1']").map(function(){return $(this).val()}).get();
		var beforeclass_id1=$("input[name='beforeclass_id1']").map(function(){return $(this).val()}).get();
		var class_id1=$("input[name='class_id1']").map(function(){return $(this).val()}).get();
		var type1=$("select[name='type1']").map(function(){return $(this).val()}).get();
		var remark1=$("input[name='remark1']").map(function(){return $(this).val()}).get();
		$.post("/qtsc/update" ,{student_id1:student_id1[id],date1:date1[id],beforeclass_id1:beforeclass_id1[id],class_id1:class_id1[id],type1:type1[id],remark1:remark1[id]},function(data){
		       if(data=='班级格式错误或不存在,请检查!

'){
		    	    alert(data);
		       }else{
		    	    alert(data);
			        location.reload();
		       }
			});
	});
});
</script>

html代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" rel="stylesheet" href="/css/dmcx.css"/>
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/cxjl.js"></script>
<script type="text/javascript" src="/My97DatePicker/WdatePicker.js"></script>
<title>MYTITLE</title>
</head>
<body bgcolor="#fff">
    <form method="post" name="reqForm" action="/Qtsc/delete">
    <table align="center" id="rounded-corner" >

        <thead>
    	    <tr>
    	        <th scope="col" class="rounded-company">全选<input type='checkbox' name="allsel" onclick="check_all(this,'id[]')"/></th>
        	    <th scope="col" class="rounded">姓名</th>
        	    <th scope="col" class="rounded">学号</th>
                <th scope="col" class="rounded">时间</th>
                <th scope="col" class="rounded">最初班级</th>
                <th scope="col" class="rounded">终于班级</th>
                <th scope="col" class="rounded">学籍变动类型</th>
                <th scope="col" class="rounded">备注</th>
                <th scope="col" class="rounded-q4">改动</th>
                <th scope="col" class="rounded-q4">删除</th>
            </tr>
        </thead>

        <tbody id="cxjg">
    	<?php
    	    $k = 0;
    	    $class = $this->class;
    	    $beforeclass = $this->beforeclass;
    		foreach ($res=$this->studentchange as $key=>$value){
                $id=$value["id"];
                $url="/qtsc/delete?id[]={$id}";
    			echo "<tr>";
    			echo "<td><input type='checkbox' name='id[]' value='".$id."'/></td>";
    			echo "<td>".$value['name']."</td>"."<td>".$value['student_id']."</td>"."<td>".$value['date']."</td>"."<td>".$beforeclass[$key]."</td>"."<td>".$class[$key]."</td>"."<td>".$value['type']."</td>"."<td>".$value['remark']."</td>";
    			echo "<td  name='".$id."' id='modify'><a href='#' id='alter'><img src='/images/user_edit.png' /></a></td>";
    			echo '<td><a href="'.$url.'" name="delete"><img src="/images/trash.png" alt="" title="" border="0" /></a></td>';
    			echo "</tr>";
    			echo "<tr class='close' name='".$k."'  id='".$id."'>
	                    <form method='post' action='/qtsc/update'>
		                  <td></td>
		                  <td><input type='hidden' name='student_id1' value='".$value['student_id']."'</td>
		                  <td>日期<input type='text' name='date1' value='".$value['date']."' class='Wdate' onclick='WdatePicker()'/></td>
		                  <td>最初班级<input type='text' name='beforeclass_id1' value='".$beforeclass[$key]."'/></td>
		                  <td>终于班级<input type='text' name='class_id1' value='".$class[$key]."' /></td>
		                  <td>学籍异动类型<select name='type1' value='".$value['type']."'>
                                            <option value='".$value['type']."'>".$value['type']."</option>
		                                    <option value='转专业'>转专业</option>
		                                    <option value='试读'>试读</option>
		                                    <option value='休学'>休学</option>
		                              </select></td>
		                  <td>备注<input type='text' name='remark1' value='".$value['remark']."'/></td>
		                  <td></td>
		                  <td><input type='button' name='update[]' value='确定改动'/></td>
		                  <td></td>
                        </form>
		              </tr>";
    			$k++;
    		}
    	?>
        </tbody>
    </table>
    </form>
<div class="bts">
     <a href="/qtsc/qtscadd" class="bt"><span class="bt_lft"></span><strong>加入记录</strong><span class="bt_r"></span></a>
     <a href="javascript:void(0)" onclick="isdo()" class="bt"><span class="bt_lft"></span><strong>删除所选</strong><span class="bt_r"></span></a>
     <!--<a href="javascript:document.reqForm.submit();" class="bt"><span class="bt_lft"></span><strong>删除所选</strong><span class="bt_r"></span></a>-->
</div>
</body>
</html>

zend framework 在这里我仅仅写控制器中的action。模型省略写,其它的不重要的也不写

//检查学生
    public function checkstuAction(){

        $stu_id=$this->getRequest()->getParam("stu_id");

        $student = new Student();
        $res = $student->getStudent($stu_id);

        $studentchange = new Studentchange();
        $res3 = $studentchange->getStuchange($stu_id);

        $beforeclass_id = $this->getRequest()->getParam('beforeclass_id');
        $class_id = $this->getRequest()->getParam('class_id');
        $classes = new Classes();
        $res1 = $classes->getClassid($beforeclass_id);
        $res2 = $classes->getClassid($class_id);
        if(count($res)==0&&count($res3)!=0){
            echo '此学号不存在,或在学籍异动中该学生已经存在';
            exit();

        }elseif(count($res1)==0||count($res2)==0){
            echo '班级格式错误或不存在。请检查!

';
            exit();
        }else{
            echo 'ok';
            exit();
        }

    }
//改动
    public function updateAction(){
        //取值
        $student_id1 = $this->getRequest()->getParam('student_id1');
        $date1 = $this->getRequest()->getParam('date1');
        $beforeclass_id1 = $this->getRequest()->getParam('beforeclass_id1');
        $class_id1 = $this->getRequest()->getParam('class_id1');
        $type1 = $this->getRequest()->getParam('type1');
        $remark1 = $this->getRequest()->getParam('remark1');

        //转化班级名为ID
        $classes = new Classes();
        $res1 = $classes->getClassid($beforeclass_id1);
        $res2 = $classes->getClassid($class_id1);
        if(count($res1)==0||count($res2)==0){
            echo '班级格式错误或不存在。请检查!';
            exit();
        }

        $data = array(
            'student_id'=>$student_id1,
            'date'=>$date1,
            'beforeclass_id'=>$res1[0]['id'],
            'class_id'=>$res2[0]['id'],
            'type'=>$type1,
            'remark'=>$remark1
        );

        $studentchange = new Studentchange();
        $db = $studentchange->getAdapter();
        $where = $db->quoteInto('student_id=?',$student_id1);
        $flag=$studentchange->update($data, $where);

//          $date1 = array(
//              'class_id'=>$res2[0]['id']
//          );
//          $student = new Student();
//          $db1 = $student->getAdapter();
//          $where1 = $db1->quoteInto('id=?

',$student_id1);
//          $flag1 = $student->update($data1, $where1);  

        if(count($flag)==0){
            echo '您未改动内容或填写格式错误,请检查!';
            exit();
        }else{
            echo '改动成功。';
            exit();
        }
    }

请勿盗版,转载请加上出处http://blog.csdn.net/yanlintao1

时间: 2024-09-28 16:32:55

用jquery实现隐藏列表表单的显示关闭切换以及Ajax方式改动提交相应的那一行的改动内容。的相关文章

用jquery实现隐藏列表表单的显示关闭切换以及Ajax方式修改提交对应的那一行的修改内容。

请勿盗版,转载请加上出处http://blog.csdn.net/yanlintao1 请勿盗版,转载请加上出处http://blog.csdn.net/yanlintao1 先给大家看看图片效果,大家不要直接复制代码,这样是运行不了的,因为你们数据库和我的不一样,但是你们可以自己读读这个代码,找找对自己有用的,当然我的方法也不是最好的希望大家可以给点意见,感激不尽. (1)点击修改图标 (2)填写修改内容 (3)点击确定修改 jquery与css代码: <style type="text

SharePoint 2013 Designer系列之自定义列表表单

在SharePoint的使用中,默认的样式过于单调经常困扰着我们,其实,SharePoint使用Designer工具,可以很轻松解决这一问题,制作出各式各样漂亮的页面.下面,让我们简单介绍下这一过程. 1.首先创建一个测试列表,里面的字段如下: 2.看一眼默认的Dispform.aspx页面,对于新闻来说,基本属于不能看: 3.使用SharePoint Designer 2013打开列表,找到Dispform.aspx页面,右键在高级模式下编辑该文件,如下图: 4.一般都是隐藏默认的td,然后新

SharePoint 2013 关于自定义显示列表表单的bug

1.在SharePoint 2013中,我们隐藏列表Dispform页面的ListFormWebPart部件,转而使用自定义显示列表表单进行展示,因为这样更容易定制我们需要的显示: 2.之后发现文件夹下的文档,查看属性会报错,如下图: 3.报错如下图,没有项目: 4.不在文件夹下的项目,就没有这样的问题,怀疑是获取CurrentItem出问题了,但是没想到怎么去改xslt,如下图: 5.百度谷歌查找解决方案,最后找到定义列表模板,参考jianyi的博客,如下图: 6.然后发现处在文件夹下的ID为

HTML2列表表单框架

HTML--Hyper Text Markup Language <html>,<head>,<body> 一.基本标签: (一)格式标签:--模型:word工具栏 <font color="" size="" face="">,<b>,<i>,<u>,<center>,<br>   (二)内容容器:--模型:腾讯新闻页面 <h1&g

Jquery通过Ajax方式来提交Form表单简单实例

因工作中有时会用到ajax,但一般也都写成函数的形式了,再写底层时还要去查资料,这里小记一下ajax的小实例以后不用经常去查了 $.ajax({ type:"POST", url: "要提交的地址", data:{"para":1,"para1":2,...}, dataType:"json",/*要提交的类型*/ success:function(val){/*返回值可以是数组,val['name']*/

jquery用ajax方式从后台获取json数据后如何将内容填充到下拉列表

对于问题从后台获取json数据,将内容填充到下拉列表,代码非常简单,具体过程请看下面代码. 需求:url:链接     par:ID       sel:下拉列表选择器 function BuildSelectBox(url, par, sel) {  $(sel).empty();  $.getJSON(url, { id: par }, function (json, textStatus) {   for (var i = json.length - 1; i >= 0; i--) {  

DataTables学习:从最基本的入门静态页面,使用ajax调用Json本地数据源实现前端开发深入学习,根据后台数据接口替换掉本地的json本地数据,以及报错的处理地方,8个例子(显示行附加信息,回调使用api,动态显示和隐藏列...),详细教程

一.DataTables  个人觉得学习一门新的插件或者技术时候,官方文档是最根本的,入门最快的地方,但是有时候看完官方文档,一步步的动手写例子,总会出现各种莫名其妙的错误,需要我们很好的进行研究出错的地方. 官方网站(中文):http://datatables.club/ 官方网站:https://www.datatables.net/  二.简单的例子 怎样简单地使用DataTables?使用下方简单的几行代码,一个方法初始化table. $(document).ready(function

[Easyui - Grid]为easyui的datagrid、treegrid增加表头菜单,用于显示或隐藏列

为easyui的datagrid.treegrid增加表头菜单,用于显示或隐藏列 /** * @author 孙宇 * * @requires jQuery,EasyUI * * 为datagrid.treegrid增加表头菜单,用于显示或隐藏列,注意:冻结列不在此菜单中 */ var createGridHeaderContextMenu = function(e, field) { e.preventDefault(); var grid = $(this);/* grid本身 */ var

jQuery插件——Validation Plugin表单验证

jQuery表单验证插件:https://plugins.jquery.com/tag/validate/ jQuery Validation插件是最常用的插件之一:http://jqueryvalidation.org/ 一.基本API rules里面的“username”是input中的“name”,不是“id”. 表单验证,主要是俩:一是规则,二是提示信息 当在使用validate插件的时候: 使用validate()方法的时候将debug设置为true,那么表单不会提交,只进行检查,调试