jQuery EasyUI ตารางข้อมูล - การสร้างมุมมองที่กำหนดเอง
ภายใต้สถานการณ์ที่แตกต่างกันคุณอาจจำเป็นต้องมีตารางข้อมูล (DataGrid) โดยใช้รูปแบบที่มีความยืดหยุ่นมากขึ้น สำหรับผู้ใช้มุมมอง Card (บัตรดู) เป็นทางเลือกที่ดี เครื่องมือนี้ได้อย่างรวดเร็วสามารถรับและแสดงข้อมูลในตารางข้อมูล (DataGrid) ใน ในตารางข้อมูล (DataGrid) หัวคุณสามารถเพียงแค่คลิกที่ส่วนหัวคอลัมน์เพื่อจัดเรียงข้อมูล กวดวิชานี้จะแสดงวิธีการสร้างมุมมองที่กำหนดเองบัตร (บัตร View)
สร้างมุมมองบัตร (บัตร View)
สืบทอดมาจากตารางข้อมูล (DataGrid) มุมมองเริ่มต้นสร้างมุมมองที่กำหนดเองเป็นวิธีที่ดี พวกเราจะไปสร้างมุมมองบัตร (บัตรดู) เพื่อแสดงบางส่วนของข้อมูลสำหรับแต่ละแถว
var cardview = $.extend({}, $.fn.datagrid.defaults.view, { renderRow: function(target, fields, frozen, rowIndex, rowData){ var cc = []; cc.push('<td colspan=' + fields.length + ' style="padding:10px 5px;border:0;">'); if (!frozen){ var aa = rowData.itemid.split('-'); var img = 'shirt' + aa[1] + '.gif'; cc.push('<img src="images/' + img + '" style="width:150px;float:left">'); cc.push('<div style="float:left;margin-left:20px;">'); for(var i=0; i<fields.length; i++){ var copts = $(target).datagrid('getColumnOption', fields[i]); cc.push('<p><span class="c-label">' + copts.title + ':</span> ' + rowData[fields[i]] + '</p>'); } cc.push('</div>'); } cc.push('</td>'); return cc.join(''); } });
การสร้างตารางข้อมูล (DataGrid)
ตอนนี้เราใช้มุมมองในการสร้างตารางข้อมูล (DataGrid)
<table id="tt" style="width:500px;height:400px" title="DataGrid - CardView" singleSelect="true" fitColumns="true" remoteSort="false" url="datagrid8_getdata.php" pagination="true" sortOrder="desc" sortName="itemid"> <thead> <tr> <th field="itemid" width="80" sortable="true">Item ID</th> <th field="listprice" width="80" sortable="true">List Price</th> <th field="unitcost" width="80" sortable="true">Unit Cost</th> <th field="attr1" width="150" sortable="true">Attribute</th> <th field="status" width="60" sortable="true">Status</th> </tr> </thead> </table>
$ ( '# Tt'). Datagrid ({ มุมมอง: cardview });
โปรดทราบว่าเราตั้งค่าคุณสมบัติมุมมองและมันก็เป็นการ์ดมุมมองของเรา