jQuery+PHP는 테이블을 편집하고 저장하는 방법을 구현합니다.

이번에는 테이블을 편집하고 저장하는 jQuery+PHP 방식을 가져오겠습니다. jQuery+PHP 방식으로 테이블을 편집하고 저장하는 경우 주의사항은 무엇인가요? 이 예에서는 jQuery를 사용하여 한 번의 클릭으로 텍스트 메시지를 편집 가능한 형식으로 변환합니다. 텍스트 내용을 편집한 다음 "확인" 버튼을 클릭하면 새 내용이 백그라운드 PHP 프로그램으로 전송됩니다. 처리하고 데이터베이스에 저장하며, "취소" 버튼을 클릭하면 페이지가 초기 상태로 돌아갑니다. 필요한 친구는 이를 참조할 수 있습니다. 사용자 세부 정보, 일부 필드 정보가 발견됩니다. 수정이 필요한 경우 필드 내용을 직접 클릭하여 수정할 수 있으므로 사용자 시간이 절약됩니다. (기존 방법은 편집 페이지에 들어가서 편집된 모든 필드 정보를 나열하는 것입니다. 필드 내용 중 하나 또는 두 개만 편집한 후 제출을 클릭하면 ) 웹 응답 속도가 향상되어 프런트엔드 사용자 경험이 향상됩니다.

이 예제는 jquery 라이브러리를 사용하고 플러그인을 기반으로 하며 다음과 같은 기능을 가지고 있습니다:

백그라운드에서 실시간 응답 및 즉각적인 부분 새로 고침.

입력 양식 유형을 사용자 정의할 수 있습니다. 현재 jeditable은 텍스트, 선택 및 텍스트 영역 유형을 제공합니다. 키보드의 Enter 및 ESC 키에 반응합니다. 플러그인 메커니즘, 이 예는 jquery ui의 datepicker 달력 제어와의 통합을 제공합니다.
구현 과정을 단계별로 설명해 보겠습니다.

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

CSS

<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>

CSS는 테이블 스타일을 렌더링하여 테이블을 더욱 편안하게 만듭니다.

jQuery
jquery의 경우 페이지의

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; }

사이에 jquery 및 jeditable 플러그인을 인용한 다음 플러그인 호출을 시작하세요.

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

플러그인은 다양한 속성 및 메서드 호출을 제공합니다. 버튼의 너비, 높이, 텍스트 정보, 제출 시 이미지 로딩, 마우스 슬라이드 시 프롬프트 정보 등을 설정할 수 있습니다. save.php는 편집된 정보가 최종적으로 제출되는 백그라운드 프로그램의 주소입니다. 이제 테이블의 정보를 편집할 수 있는지 확인해 보세요.
Jeditable은 선택, 텍스트 영역 유형 편집 기능도 제공하고 플러그인 API 인터페이스도 제공합니다. 드롭다운 선택 상자 선택 처리를 살펴보겠습니다.

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

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

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

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

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

실제로 위 코드의 데이터가 json 데이터의 문자열이라는 것을 찾는 것은 어렵지 않습니다.
텍스트 영역 유형은 더 이상 대부분이 아닙니다. 유형 유형을 텍스트 영역으로 변경하세요. 추신: 기본 유형은 텍스트입니다. 날짜 유형을 다룰 때 jquery ui 캘린더 플러그인을 연결했습니다. 물론 juqery ui 플러그인과 스타일을 소개하는 것도 잊지 마세요.

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

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

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

호출 코드는 유형을 직접 지정합니다. 유형은 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(); 
  } 
});

이제 양식의 "기간 제한" 필드에 있는 날짜를 수정할 수 있는지 확인해 보겠습니다. 여러분의 참여를 기다리고 있는 더 많은 플러그인 연결이 있습니다.
PHP

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

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

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

이것으로 편집 가능한 양식이 완성됩니다. 하지만 아직 끝나지 않았습니다. 입력된 정보의 유효성 검증에 대한 후속 글을 첨부할 예정이니 지켜봐 주시기 바랍니다.
이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!
추천 도서:

jquery의 테이블 조작 방법 요약

jquery의 동적인 테이블 행 조작

jquery의 HTML 테이블에 행 동적인 추가 방법 요약

위 내용은 jQuery+PHP는 테이블을 편집하고 저장하는 방법을 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!