بيانات الشبكة مسج EasyUI - إنشاء عرض مخصص
في ظل ظروف مختلفة، قد تحتاج إلى شبكة البيانات (datagrid) باستخدام تخطيط أكثر مرونة. بالنسبة للمستخدمين، وعرض بطاقة (بطاقة عرض) هو خيار جيد. هذه الأداة يمكن أن يكتسب بسرعة وعرض البيانات في شبكة البيانات (datagrid) في. في رأس شبكة البيانات (datagrid)، يمكنك فقط عن طريق النقر على رأس العمود لفرز البيانات. هذا البرنامج التعليمي سوف تظهر لك كيفية إنشاء طريقة عرض بطاقة مخصصة (بطاقة عرض).
إنشاء طريقة عرض بطاقة (بطاقة عرض)
ورثت من طريقة العرض الافتراضية بيانات الشبكة (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>
$ ( '# ترينيداد وتوباغو). Datagrid ({ عرض: cardview })؛
لاحظ أننا تعيين خصائص الرأي، وأنه لدينا بطاقة الرأي.