การประยุกต์ใช้ jQuery EasyUI - สร้างข้อมูล CRUD ตาราง
ในส่วนก่อนหน้านี้เราใช้โต้ตอบ (โต้ตอบ) ส่วนประกอบในการสร้างแอปพลิเค CRUD ในการสร้างและแก้ไขข้อมูลผู้ใช้ กวดวิชานี้จะแสดงวิธีการสร้างตารางข้อมูล CRUD (DataGrid) เราจะใช้ ข้อมูลที่สามารถแก้ไขได้กริด (DataGrid) plug-in ที่จะเสร็จสิ้นการกระทำเหล่านี้การดำเนินงาน CRUD
ขั้นตอนที่ 1: กำหนดข้อมูลแท็กตาราง (DataGrid)
<table id = "DG" title = "ผู้ใช้ของฉัน" style = "width: 550px; ความสูง: 250px" แถบเครื่องมือ = "# แถบเครื่องมือ" idField = "id" rownumbers = fitColumns "จริง" = "true" singleSelect = "true"> <thead> <tr> <Th ฟิลด์ = "FirstName" width = "50" บรรณาธิการ = "{ประเภท: 'validatebox' ตัวเลือก: {ต้อง: จริง}}"> ชื่อ </ TH> <Th ฟิลด์ = "นามสกุล" width = "50" บรรณาธิการ = "{ประเภท: 'validatebox' ตัวเลือก: {ต้อง: จริง}}"> นามสกุล </ TH> <Th ฟิลด์ = "โทรศัพท์" width = "50" บรรณาธิการ = "text"> โทรศัพท์ </ TH> <Th ฟิลด์ = "อีเมล" width = "50" บรรณาธิการ = "{ประเภท: 'validatebox' ตัวเลือก: {validType: 'อีเมล'}}"> อีเมล์ </ TH> </ tr> </ thead> </ table> <div id = "แถบเครื่องมือ"> <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="javascript:$('#dg').edatagrid('addRow')"> ใหม่ </ A> <a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="javascript:$('#dg').edatagrid('destroyRow')"> ทำลาย </ A> <a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true" onclick="javascript:$('#dg').edatagrid('saveRow')"> บันทึก </ A> <a href="#" class="easyui-linkbutton" iconCls="icon-undo" plain="true" onclick="javascript:$('#dg').edatagrid('cancelRow')"> ยกเลิก </ A> </ div>
ขั้นตอนที่ 2: ใช้ข้อมูลที่สามารถแก้ไขได้กริด (DataGrid)
$ ( '# Dg'). Edatagrid ({ URL: 'get_users.php' saveUrl: 'save_user.php' updateUrl: 'update_user.php' destroyUrl: 'destroy_user.php' });
เราควรมี 'URL', 'saveUrl', 'updateUrl และแอตทริบิวต์' destroyUrl 'เพื่อแก้ไขตารางข้อมูล (DataGrid):
- URL: ดึงข้อมูลของผู้ใช้จากเซิร์ฟเวอร์
- saveUrl: บันทึกข้อมูลผู้ใช้ใหม่
- updateUrl: การปรับปรุงข้อมูลใช้ที่มีอยู่
- destroyUrl: การลบข้อมูลของผู้ใช้ที่มีอยู่
ขั้นตอนที่ 3: เขียนโค้ดการประมวลผลของเซิร์ฟเวอร์
บันทึกผู้ใช้ใหม่ (save_user.php):
$ นามสกุล = $ _REQUEST [ 'FirstName']; $ นามสกุล = $ _REQUEST [ 'นามสกุล']; $ โทรศัพท์ = $ _REQUEST [ 'โทรศัพท์']; $ อีเมล์ = $ _REQUEST [ 'อีเมล']; รวมถึง conn.php '; $ Sql = "แทรกลงในผู้ใช้ (ชื่อ, นามสกุล, เบอร์โทรศัพท์, อีเมล) ค่า ( '$ FirstName', '$ นามสกุล', '$ โทรศัพท์', '$ อีเมล')"; @mysql_query ($ SQL); json_encode Echo (array ( "ID" => mysql_insert_id () 'นามสกุล' => $ FirstName, 'นามสกุล' => $ นามสกุล, 'โทรศัพท์' โทรศัพท์ => $, 'อีเมล' => $ อีเมล ));
อัพเดทผู้ใช้อยู่แล้ว (update_user.php):
Id = $ intval ($ _ REQUEST [ 'ID']); $ นามสกุล = $ _REQUEST [ 'FirstName']; $ นามสกุล = $ _REQUEST [ 'นามสกุล']; $ โทรศัพท์ = $ _REQUEST [ 'โทรศัพท์']; $ อีเมล์ = $ _REQUEST [ 'อีเมล']; รวมถึง conn.php '; $ Sql = "ผู้ใช้อัปเดตชุด FirstName = '$ FirstName', นามสกุล = '$ นามสกุล' โทรศัพท์ = '$ โทรศัพท์, อีเมล =' $ อีเมล 'ที่ id = $ id"; @mysql_query ($ SQL); json_encode Echo (array ( 'Id' => $ id, 'นามสกุล' => $ FirstName, 'นามสกุล' => $ นามสกุล, 'โทรศัพท์' โทรศัพท์ => $, 'อีเมล' => $ อีเมล ));
ในการลบผู้ใช้ที่มีอยู่แล้ว (destroy_user.php):
Id = $ intval ($ _ REQUEST [ 'ID']); รวมถึง conn.php '; $ Sql = "ลบจากผู้ใช้ที่ id = $ id"; @mysql_query ($ SQL); json_encode Echo (array ( 'ความสำเร็จ' => จริง));