jQuery PHP는 편집 가능한 테이블 필드 콘텐츠를 구현하고 실시간으로 저장합니다_jquery

이 예는 시나리오에 적용 가능합니다. 사용자 세부 정보 등 세부 정보를 보고 일부 필드 정보를 수정해야 하는 경우 필드 내용을 직접 클릭하여 수정할 수 있어 사용자의 시간을 절약할 수 있습니다. (기존 방법은 편집기 페이지에 들어가서 편집된 모든 필드 정보를 나열하는 것입니다. 한두 개의 필드 내용만 편집해야 하는 경우에도 그런 다음 제출을 클릭하면 됩니다.) 웹 응답 속도가 향상되어 프런트엔드 사용자가 향상됩니다. 경험.

이 예제는 jquery 라이브러리를 사용하며 다음 기능을 갖춘 플러그인을 기반으로 합니다.
실시간 편집, 백그라운드에서의 실시간 응답 및 즉각적인 부분 새로 고침.
입력 양식 유형은 사용자 정의할 수 있습니다. 현재 jeditable은 텍스트, 선택 및 텍스트 영역 유형을 제공합니다.
키보드의 Enter 및 ESC 키에 응답합니다.
플러그인 메커니즘인 이 예는 jquery ui의 datepicker 달력 제어와의 통합을 제공합니다.
아래에서는 구현 프로세스를 단계별로 설명하겠습니다.
XHTML
다음과 같은 양식을 작성해야 합니다.

<table width="100%" border="0" cellspacing="0" cellpadding="0"> 
 <thead> 
  <tr class="table_title"> 
   <td colspan="4"><span class="open"></span>客户信息</td> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td width="20%" class="table_label">姓名</td> 
   <td width="30%" class="edit" id="username">李小三</td> 
   <td width="20%" class="table_label">办公电话</td> 
   <td width="30%" class="edit" id="phone">021-12345678</td> 
  </tr> 
  <tr> 
   <td class="table_label">称谓</td> 
   <td class="edit" id="solutation">先生</td> 
   <td class="table_label">手机</td> 
   <td class="edit" id="mobile">13800138000</td> 
  </tr> 
  <tr> 
   <td class="table_label">公司名称</td> 
   <td class="edit" id="company">常丰集团</td> 
   <td class="table_label">电子邮箱</td> 
   <td class="edit" id="email">lrfbeyond@163.com</td> 
  </tr> 
  <tr> 
   <td class="table_label">潜在客户来源</td> 
   <td class="edit_select" id="source">公共关系</td> 
   <td class="table_label">有限期</td> 
   <td class="datepicker" id="sdate">2011-11-30</td> 
  </tr> 
  <tr> 
   <td class="table_label">职位</td> 
   <td class="edit" id="job">部门经理</td> 
   <td class="table_label">网站</td> 
   <td class="edit" id="web">www.helloweba.com</td> 
  </tr> 
  <tr> 
   <td class="table_label">创建时间</td> 
   <td>2010-11-04 21:11:59</td> 
   <td class="table_label">修改时间</td> 
   <td id="modifiedtime">2010-11-05 09:42:52</td> 
  </tr> 
  <tr> 
   <td class="table_label">备注</td> 
   <td class="textarea" id="note" colspan="3">备注信息</td> 
  </tr> 
 </tbody> 
</table> 

코드를 보면 응답 필드 정보의 td에 class와 id 속성이 부여되고 값이 할당된 것을 확인할 수 있습니다. 테이블의 td에 해당하는 id 값은 데이터베이스의 필드 이름과 1:1로 대응된다는 점을 언급할 필요가 있습니다. 이는 편집 중에 배경이 해당 필드 정보를 얻을 수 있도록 하기 위한 것입니다. 이에 대해서는 다음에서 설명합니다. PHP 코드는 나중에.
CSS

table{width:96%; margin:20px auto; border-collapse:collapse;} 
table td{line-height:26px; padding:2px; padding-left:8px; border:1px solid #b6d6e6;} 
.table_title{height:26px; line-height:26px; background:url(btn_bg.gif) repeat-x bottom; 
 font-weight:bold; text-indent:.3em; outline:0;} 
.table_label{background:#e8f5fe; text-align:right; } 

CSS는 테이블 스타일을 렌더링하여 테이블이 더욱 편안해 보이도록 합니다.
jQuery
jquery의 경우 페이지의

<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/jquery.jeditable.js"></script> 

그런 다음 플러그인 호출을 시작하세요.

$(function(){ 
   $('.edit').editable('save.php', { 
     width   :120, 
     height  :18, 
     //onblur  : 'ignore', 
     cancel  : '取消', 
     submit  : '确定', 
     indicator : '<img src="loader.gif">', 
     tooltip  : '单击可以编辑...' 
   }); 
}); 

플러그인은 다양한 속성과 메소드 호출을 제공합니다. 버튼의 너비, 높이, 텍스트 정보, 제출 시 이미지 로딩, 마우스 슬라이드 시 프롬프트 정보 등을 설정할 수 있습니다. save.php는 편집된 정보가 최종적으로 제출되는 백그라운드 프로그램의 주소입니다. 이제 테이블의 정보를 편집할 수 있는지 확인하세요.

Jeditable은 또한 선택, 텍스트 영역 유형 편집을 제공하고 플러그인 API 인터페이스를 제공합니다.
드롭다운 선택 상자 선택 처리를 살펴보겠습니다.

$('.edit_select').editable('save.php', { 
  loadurl  : 'json.php', 
  type   : "select", 
}); 

type은 선택 유형을 지정합니다. select에 로드된 데이터는 json.php에서 가져옵니다. json.php는 드롭다운 상자에 필요한 데이터 소스를 제공합니다.

$array['老客户'] = '老客户'; 
$array['独自开发'] = '独自开发'; 
$array['合作伙伴'] = '合作伙伴'; 
$array['公共关系'] = '公共关系'; 
$array['展览会'] = '展览会'; 
print json_encode($array); 

이러한 데이터는 json.php 파일에 직접 저장됩니다. 물론 데이터베이스 정보를 읽어서 json 데이터를 생성하는 방법도 확인할 수 있습니다. 또 다른 방법은 편집 가능 항목에서 직접 데이터를 지정하는 것입니다.

$('.edit_select').editable('save.php', { 
  data : " {'老客户':'老客户','独自开发':'独自开发','合作伙伴':'合作伙伴', '展览会':'展览会'}", 
  type : "select", 
}); 

위 코드의 데이터가 실제로 json 데이터의 문자열이라는 것을 찾는 것은 어렵지 않습니다.

텍스트 영역 유형은 더 이상 대부분이 아닙니다. 유형 유형을 텍스트 영역으로 변경하면 됩니다. 추신: 기본 유형은 텍스트입니다.
날짜 유형을 다룰 때 jquery ui 캘린더 플러그인을 연결했습니다. 물론 juqery ui 플러그인과 스타일을 소개하는 것도 잊지 마세요.

<link rel="stylesheet" type="text/css" href="css/jquery-ui.css" /> 
<script type="text/javascript" src="js/jquery-ui.js"></script> 

jquery ui의 datepicker 캘린더 플러그인에 연결

$.editable.addInputType('datepicker', { 
  element : function(settings, original) { 
    var input = $('<input class="input" />'); 
    input.attr("readonly","readonly"); 
    $(this).append(input); 
    return(input); 
  }, 
  plugin : function(settings, original) { 
    var form = this; 
    $("input",this).datepicker(); 
  } 
}); 

호출 코드는 유형을 datepicker로 직접 지정할 수 있습니다.

$(".datepicker").editable('save.php', { 
  width   : 120, 
  type   : 'datepicker', 
  onblur  : "ignore", 
}); 

이제 양식의 '기간 제한' 필드 날짜를 수정할 수 있는지 확인해 보세요. 글쎄, 당신의 참여를 기다리는 다른 많은 플러그인이 있습니다.

PHP 편집된 필드 정보는 처리를 위해 백그라운드 프로그램인 save.php 프로그램으로 전송됩니다. save.php가 완료해야 하는 작업은 프런트 엔드에서 제출한 필드 정보 데이터를 수신하고 필요한 필터링 및 검증을 수행한 다음 데이터 테이블에서 해당 필드 내용을 업데이트하고 결과를 반환하는 것입니다.

include_once("connect.php"); //连接数据库 
$field=$_POST['id']; //获取前端提交的字段名 
$val=$_POST['value']; //获取前端提交的字段对应的内容 
$val = htmlspecialchars($val, ENT_QUOTES); //过滤处理内容 
 
$time=date("Y-m-d H:i:s"); //获取系统当前时间 
if(emptyempty($val)){ 
  echo "不能为空"; 
}else{ 
  //更新字段信息 
  $query=mysql_query("update customer set $field='$val',modifiedtime='$time' where id=1"); 
  if($query){ 
    echo $val; 
  }else{ 
    echo "数据出错"; 
  } 
} 

처음의 HTML 코드로 돌아가서 테이블에 표시된 필드 내용 정보는 물론 데이터베이스에서 읽어온 것이므로, 데이터 테이블을 읽고 내용을 표시하려면 PHP를 사용해야 합니다. 스스로 처리하세요.

이로써 편집 가능한 양식이 완성되었습니다. 하지만 아직 끝나지 않았습니다. 입력된 정보의 유효성 검증에 대한 후속 글을 첨부할 예정이니 지켜봐 주시기 바랍니다.

편집자가 엮은 모든 글이 모두에게 도움이 되기를 바랍니다.