jQuery EasyUI ตารางข้อมูล - สร้างแถบเครื่องมือที่ซับซ้อน
ตารางข้อมูล (DataGrid) แถบเครื่องมือ (แถบเครื่องมือ) สามารถมีปุ่มและส่วนประกอบอื่น ๆ คุณสามารถผ่านแท็ก DIV ที่มีอยู่เพื่อให้ง่ายต่อการจัดวางแถบเครื่องมือที่กำหนดเองแท็ก div ที่จะกลายเป็นเนื้อหาของตารางข้อมูล (DataGrid) แถบเครื่องมือ กวดวิชานี้จะแสดงวิธีการสร้างตารางข้อมูลที่ซับซ้อนแถบเครื่องมือ (DataGrid) ส่วนประกอบ
สร้างแถบเครื่องมือ (Toolbar)
<div id = "วัณโรค" style = "padding: 5px; ความสูง: อัตโนมัติ"> <div style = "margin ล่าง: 5px"> <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true"> </a> <a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true"> </a> <a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true"> </a> <a href="#" class="easyui-linkbutton" iconCls="icon-cut" plain="true"> </a> <a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true"> </a> </ div> <div> วันที่จาก: <input class = "easyui-datebox" style = "width: 80px"> ไปที่: <input class = "easyui-datebox" style = "width: 80px"> ภาษา: <input class = "easyui-ComboBox" style = "width: 100px" url = "ข้อมูล / combobox_data.json" valueField = "id" TextField = "text"> <a href="#" class="easyui-linkbutton" iconCls="icon-search"> ค้นหา </a> </ div> </ div>
การสร้างตารางข้อมูล (DataGrid)
<table class = "easyui-DataGrid" style = "width: 600px; ความสูง: 250px" url = "ข้อมูล / datagrid_data.json" title = "DataGrid - แถบเครื่องมือที่ซับซ้อน" แถบเครื่องมือ = "# TB" singleSelect = fitColumns "true" = "true"> <thead> <tr> <ฟิลด์ Th = "Itemid" width = "60"> รหัสรายการ </ TH> <ฟิลด์ Th = "ProductID" width = "80"> รหัสสินค้า </ TH> <Th ฟิลด์ = "listprice" align = "สิทธิ" width = "70"> ราคา </ TH> <ฟิลด์ Th = "unitcost" align = "สิทธิ" width = "70"> ต้นทุนต่อหน่วย </ TH> <Th ฟิลด์ = "ATTR1" width = "200"> ที่อยู่ </ TH> <ฟิลด์ Th = "สถานะ" width = "50"> สถานะ </ TH> </ tr> </ thead> </ table>
ในขณะที่คุณสามารถดูตารางข้อมูล (DataGrid) แถบเครื่องมือทุ่งกล่องโต้ตอบ (โต้ตอบ) ที่คล้ายกัน เราไม่จำเป็นต้องเขียนโค้ดจาวาสคริปต์ใด ๆ ที่คุณสามารถสร้างแถบเครื่องมือที่มีความซับซ้อนตารางข้อมูล (DataGrid)