jQuery PHP melaksanakan kandungan medan jadual boleh diedit dan menyimpannya dalam masa nyata_jquery

Contoh ini boleh digunakan pada senario: apabila melihat maklumat terperinci, seperti butiran pengguna, dan mendapati bahawa beberapa maklumat medan perlu diubah suai, anda boleh terus mengklik kandungan medan untuk mengubah suainya, menjimatkan masa pengguna (kaedah tradisional ialah memasukkan halaman editor, menyenaraikan semua maklumat medan yang diedit, walaupun anda hanya perlu mengedit satu atau dua kandungan medan, dan kemudian klik serah), ia meningkatkan kelajuan tindak balas WEB, dengan itu meningkatkan pengguna bahagian hadapan. pengalaman.

Contoh ini bergantung pada perpustakaan jquery dan berdasarkan pemalam, dengan ciri berikut:
Pengeditan masa nyata, respons masa nyata di latar belakang dan muat semula separa segera.
Jenis borang input boleh disesuaikan pada masa ini yang boleh dijejaki menyediakan jenis teks, pilih dan kawasan teks.
Balas kekunci Enter dan ESC papan kekunci.
Mekanisme pemalam, contoh ini menyediakan penyepaduan dengan kawalan kalendar datepicker ui jquery.
Di bawah ini kami akan menerangkan proses pelaksanaan langkah demi langkah.
XHTML
Kami perlu membuat borang seperti berikut:

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

Ini ialah jadual maklumat pengguna Daripada kod tersebut, anda boleh mendapati bahawa td maklumat medan respons diberikan atribut kelas dan id dan diberi nilai. Perlu dinyatakan bahawa nilai id yang sepadan dengan td dalam jadual sepadan satu-dengan-satu dengan nama medan dalam pangkalan data Ini dilakukan untuk membolehkan latar belakang mendapatkan maklumat medan yang sepadan semasa penyuntingan, yang akan dibincangkan dalam Kod PHP kemudian.
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 menjadikan gaya meja untuk menjadikan meja kelihatan lebih selesa.
jQuery
Apabila bercakap tentang jquery, anda mesti ingat untuk memetik pemalam jquery dan jeditable
di antara 93f0f5c25f18dab9d176bd4f6de5d30e

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

Kemudian mula memanggil pemalam.

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

Pemalam menyediakan banyak atribut dan panggilan kaedah. Anda boleh menetapkan lebar, ketinggian, maklumat teks butang, memuatkan imej semasa menghantar, maklumat segera apabila tetikus meluncur ke atas, dsb. save.php ialah alamat program latar belakang di mana maklumat yang diedit akhirnya diserahkan. Sekarang lihat jika maklumat dalam jadual boleh diedit.
Jeditable juga menyediakan pengeditan jenis textarea terpilih dan menyediakan antara muka API pemalam.
Mari lihat pemprosesan pemilihan kotak pilihan lungsur turun:

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

jenis menentukan jenis pilih Data yang dimuatkan dalam pilih berasal dari json.php.php menyediakan sumber data yang diperlukan untuk kotak lungsur.

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

Data ini disimpan terus dalam fail json.php Sudah tentu, anda juga boleh membaca maklumat pangkalan data dan kemudian menjana data json. Kaedah lain adalah untuk menentukan data secara langsung dalam boleh diedit:

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

Tidak sukar untuk mencari bahawa data dalam kod di atas sebenarnya adalah rentetan data json.
Jenis textarea bukan lagi majoriti, cuma tukar jenis jenis kepada textarea. PS: Jenis lalai ialah teks.
Apabila berurusan dengan jenis tarikh, saya menyambungkan pemalam kalendar jquery ui Sudah tentu, jangan lupa untuk memperkenalkan pemalam dan gaya juqery ui:

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

Sambung ke pemalam kalendar datepicker bagi jquery ui

$.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(); 
  } 
}); 

Kod panggilan boleh secara langsung menentukan jenis sebagai pemetik tarikh.

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

Sekarang lihat jika tarikh medan "Tempoh Terhad" dalam borang boleh diubah suai. Nah, terdapat banyak pemalam lain menunggu penyertaan anda.
PHP
Maklumat medan yang diedit akan dihantar ke program latar belakang save.php untuk diproses. Kerja yang perlu disiapkan oleh save.php ialah: terima data maklumat medan yang diserahkan oleh bahagian hadapan, lakukan penapisan dan pengesahan yang diperlukan, kemudian kemas kini kandungan medan yang sepadan dalam jadual data, dan kembalikan hasilnya.

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 "数据出错"; 
  } 
} 

Kembali ke kod HTML pada permulaan Maklumat kandungan medan yang dipaparkan dalam jadual sudah tentu dibaca dari pangkalan data, jadi anda perlu menggunakan PHP untuk membaca jadual data dan memaparkan kandungannya proses sendiri.
Ini menyimpulkan borang yang boleh diedit. Tetapi ia belum selesai lagi saya akan lampirkan artikel seterusnya mengenai pengesahan kesahihan maklumat input, jadi nantikan.

Saya harap setiap artikel yang disusun oleh editor akan membantu semua orang.