jQuery EasyUI ตารางข้อมูล - เพจที่กำหนดเอง
ตารางข้อมูล (DataGrid) สร้างแท็บคุณลักษณะที่ดีที่กำหนดเองจะค่อนข้างง่าย ในการกวดวิชานี้เราจะสร้างตารางข้อมูล (DataGrid) และแท็บบนแถบเครื่องมือในการเพิ่มปุ่มที่กำหนดเองบางส่วน
การสร้างตารางข้อมูล (DataGrid)
<table id = "TT" title = "โหลดข้อมูล" class = "easyui-DataGrid" style = "width: 550px; ความสูง: 250px" url = "ข้อมูล / datagrid_data.json" iconCls = "ไอคอนบันทึก" เลข = "true"> <thead> <tr> <ฟิลด์ Th = "Itemid" width = "80"> รหัสรายการ </ TH> <ฟิลด์ Th = "ProductID" width = "80"> รหัสสินค้า </ TH> <Th ฟิลด์ = "listprice" width = "80" align = "สิทธิ"> ราคา </ TH> <ฟิลด์ Th = "unitcost" width = "80" align = "สิทธิ"> ต้นทุนต่อหน่วย </ TH> <Th ฟิลด์ = "ATTR1" width = "100"> แอตทริบิวต์ </ TH> <ฟิลด์ Th = "สถานะ" width = "60" align = "center"> สมรส </ TH> </ tr> </ thead> </ table>
โปรดจำไว้ว่าการตั้งค่า 'เลข' คุณสมบัติเป็นความจริงนี้จะสร้างแถบเครื่องมือเพจจิ้ง
ที่กำหนดเองแถบเครื่องมือเพจ
เพจเจอร์ var = $ ( '# TT') DataGrid ( 'getPager') ;. // ได้รับเพจเจอร์ของการ DataGrid pager.pagination ({ showPageList: เท็จ ปุ่ม: [{ iconCls: 'ไอคอนค้นหา', จัดการ: ฟังก์ชั่น () { แจ้งเตือน (ค้นหา '); } }, { iconCls: 'ไอคอนเพิ่ม' จัดการ: ฟังก์ชั่น () { แจ้งเตือน ( 'เพิ่ม'); } }, { iconCls: ไอคอน 'แก้ไข' จัดการ: ฟังก์ชั่น () { แจ้งเตือน ( 'แก้ไข'); } }] onBeforeRefresh: ฟังก์ชั่น () { แจ้งเตือน ( 'ก่อนที่จะรีเฟรช'); กลับจริง; } });
ที่คุณสามารถดูเราได้รับข้อมูลตารางแรก (DataGrid) ของวัตถุเพจเจอร์แล้วสร้างใหม่อีกครั้งหน้า (เลข) เราซ่อนรายการของหน้าเว็บและเพิ่มสามปุ่มใหม่