jQuery EasyUI ขยาย - ตารางข้อมูลแบบเลื่อนแถว
jQuery EasyUI ขยาย
การใช้
มันมีไฟล์ 'DataGrid-dnd.js'
<ชนิด Script = "text / javascript ของ" src = "DataGrid-dnd.js"> </ script>
เปิดใช้งานการลากและวาง
<ตารางเรียน = "easyui-DataGrid" title = "DataGrid" style = "width: 700px; ความสูง: 250px" data-ตัวเลือก = " singleSelect: จริง ข้อมูล: ข้อมูล onLoadSuccess: ฟังก์ชั่น () { $ (นี้) .datagrid ( 'enableDnd'); } "> <thead> <tr> <Th ข้อมูลตัวเลือก = "field: 'Itemid' ความกว้าง: 80"> รหัสรายการ </ TH> <Th ข้อมูลตัวเลือก = "field: 'ProductID' ความกว้าง: 100"> สินค้า </ TH> <Th ข้อมูลตัวเลือก = "field: 'listprice' ความกว้าง: 80 จัด: 'ขวา'"> ราคา </ TH> <Th ข้อมูลตัวเลือก = "field: 'unitcost' ความกว้าง: 80 จัด: 'ขวา'"> ต้นทุนต่อหน่วย </ TH> <Th ข้อมูลตัวเลือก = "field: 'ATTR1' ความกว้าง: 250"> แอตทริบิวต์ </ TH> <Th ข้อมูลตัวเลือก = "field: 'สถานะ', ความกว้าง: 60 จัด: 'ศูนย์'"> สถานะ </ TH> </ tr> </ thead> </ table>
เหตุการณ์
กรณีที่ยื่นออกมาจากตารางข้อมูล (DataGrid) เหตุการณ์ต่อไปนี้สำหรับตารางข้อมูล (DataGrid) เพิ่ม
名称 | 参数 | 描述 |
---|---|---|
onBeforeDrag | row | 当一行的拖拽开始前触发,返回 false 则取消拖拽。 |
onStartDrag | row | 当开始拖拽一行时触发。 |
onStopDrag | row | 当停止拖拽一行后触发。 |
onDragEnter | targetRow, sourceRow | 当拖拽一行进入某允许放置的目标行时触发,返回 false 则取消放置。 |
onDragOver | targetRow, sourceRow | 当拖拽一行在某允许放置的目标行上时触发,返回 false 则取消放置。 |
onDragLeave | targetRow, sourceRow | 当拖拽一行离开某允许放置的目标行时触发。 |
onBeforeDrop | targetRow,sourceRow,point |
当一行被放置前触发,返回 false 则取消放置。 targetRow:放置的目标行。 sourceRow:拖拽的源行。 point:指示放置的位置,可能的值:'top' 或 'bottom'。 |
onDrop | targetRow,sourceRow,point |
当一行被放置时触发。 targetRow:放置的目标行。 sourceRow:拖拽的源行。 point:指示放置的位置,可能的值:'top' 或 'bottom'。 |
ทาง
วิธีการขยายจากตารางข้อมูล (DataGrid)
名称 | 参数 | 描述 |
---|---|---|
enableDnd | index |
启用行的拖拽与放置。 'index' 参数指示要被拖拽与放置的行。 如果该参数未指定,则拖拽与放置所有行。 代码实例: $('#dg').datagrid('enableDnd', 1); // enable dragging on second row $('#dg').datagrid('enableDnd'); // enable dragging all rows |
ดาวน์โหลดตัวอย่าง jQuery EasyUI
jquery-easyui-datagrid-dnd.zip
jQuery EasyUI ขยาย