-
jQuery EasyUI หลักสูตร
jEasyUI ใบสมัคร
- jEasyUI การสร้างแอพลิเคชัน CRUD
- jEasyUI การสร้างตารางข้อมูล CRUD
- jEasyUI แบบฟอร์มใบสมัคร CRUD
- jEasyUI สร้างอ่าน RSS
jEasyUI ลากและวาง
jEasyUI เมนูและปุ่ม
jEasyUI แบบ
- jEasyUI สร้างรูปแบบเส้นขอบ
- jEasyUI สร้างรูปแบบที่ซับซ้อน
- jEasyUI สร้างแผงพับ
- jEasyUI สร้างแท็บ
- jEasyUI แบบไดนามิกเพิ่มแท็บ
- jEasyUI เพิ่มแท็บเล่นอัตโนมัติ
- jEasyUI สร้างสไตล์ XP บนแผงด้านข้างซ้าย
jEasyUI ตารางข้อมูล
- jEasyUI แปลงเป็น HTML ตารางข้อมูลตาราง
- jEasyUI ได้รับข้อมูลที่เลือกแถว
- jEasyUI เพิ่มสอบถามรายละเอียดเพิ่มเติม
- jEasyUI เพิ่มแถบเครื่องมือ
- jEasyUI สร้างแถบเครื่องมือที่ซับซ้อน
- jEasyUI การตั้งค่าคอลัมน์แช่แข็ง
- jEasyUI คอลัมน์เปลี่ยนแบบไดนามิก
- jEasyUI คอลัมน์รูปแบบ
- jEasyUI ตั้งค่าการจัดเรียง
- jEasyUI การสั่งซื้อที่กำหนดเอง
- jEasyUI สร้างการรวมกันของคอลัมน์
- jEasyUI เพิ่มช่องทำเครื่องหมาย
- jEasyUI เพจที่กำหนดเอง
- jEasyUI เปิดใช้งานการแก้ไขแบบอินไลน์
- jEasyUI บรรณาธิการขยาย
- jEasyUI การดำเนินงานของคอลัมน์
- jEasyUI เซลล์ที่ผสาน
- jEasyUI สร้างมุมมองที่กำหนดเอง
- jEasyUI สร้างสรุปท้าย
- jEasyUI เงื่อนไขที่กำหนดแถวสีพื้นหลัง
- jEasyUI สร้างตารางทรัพย์สิน
- jEasyUI สายการขยายตัวแสดงรายละเอียด
- jEasyUI สร้างเขตการปกครอง
- jEasyUI แสดงข้อมูลขนาดใหญ่
- jEasyUI เพิ่มองค์ประกอบหน้า
jEasyUI หน้าต่าง
- jEasyUI การสร้างหน้าต่างที่เรียบง่าย
- jEasyUI ที่กำหนดเองแถบหน้าต่าง
- jEasyUI หน้าต่างและเค้าโครง
- jEasyUI สร้างโต้ตอบ
- jEasyUI กำหนดเองกล่องโต้ตอบ
jEasyUI เมนูต้นไม้
- jEasyUI ใช้แท็กเพื่อสร้างเมนูต้นไม้
- jEasyUI สร้างเมนูต้นไม้ตรงกัน
- jEasyUI การเพิ่มเมนูโหนด
- jEasyUI สร้างเมนูต้นไม้ที่มีช่องทำเครื่องหมาย
- jEasyUI ลากและวางเมนูควบคุมต้นไม้
- jEasyUI โหลดต้นไม้เมนูโหนดแม่ / ลูก
- jEasyUI การสร้างตารางตามต้นไม้
- jEasyUI สร้างตาข่ายต้นไม้ที่ซับซ้อน
- jEasyUI ตารางต้นไม้โหลดแบบไดนามิก
- jEasyUI เพิ่มตารางต้นไม้แท็บ
- jEasyUI โหลดขี้เกียจต้นไม้ตารางโหนด
jEasyUI ฟอร์ม
- jEasyUI ส่งแบบฟอร์มในการสร้างไม่ตรงกัน
- jEasyUI รูปแบบการตรวจสอบสิทธิ์
- jEasyUI สร้างแบบหล่นลงต้นไม้กล่อง
- jEasyUI รูปแบบกล่องแบบหล่นลง
- jEasyUI กรองตารางข้อมูลแบบเลื่อนลง
jEasyUI คู่มืออ้างอิง
บทช่วยสอน jQuery EasyUI ตารางข้อมูล - การดำเนินงานของคอลัมน์ ที่ดีที่สุดในปี 2024 ในบทช่วยสอนนี้ คุณสามารถเรียนรู้ ดาวน์โหลดตัวอย่าง jQuery EasyUI,
jQuery EasyUI ตารางข้อมูล - การดำเนินงานของคอลัมน์
ในการกวดวิชานี้คุณจะได้เรียนรู้วิธีการที่จะรวมคอลัมน์ในการดำเนินงานของตารางข้อมูลที่สามารถแก้ไขได้ (DataGrid) ในส่วน คอลัมน์การดำเนินงานโดยทั่วไปจะมีค่าจากการดำเนินงานคอลัมน์อื่น ๆ หนึ่งหรือมากกว่า
แรกสร้างตารางข้อมูลที่สามารถแก้ไขได้ (DataGrid) ที่นี่เราสร้างบางคอลัมน์ที่สามารถแก้ไขได้ 'listprice', 'ปริมาณ' และ 'unitcost' คอลัมน์กำหนดเป็น numberbox แก้ไขประเภท คอลัมน์การดำเนินการเป็นเขต 'unitcost' จะเป็นผลมาจากการคูณจำนวนคอลัมน์ listprice ที่
<table id = "TT" style = "width: 600px; ความสูง: อัตโนมัติ"
title = "ที่สามารถแก้ไขได้ด้วยการคำนวณ DataGrid คอลัมน์" iconCls = "ไอคอนแก้ไข" singleSelect = "true"
idField = "itemid" URL = "ข้อมูล / datagrid_data.json">
<thead>
<tr>
<ฟิลด์ Th = "Itemid" width = "80"> รหัสรายการ </ TH>
<Th ฟิลด์ = "listprice" width = "80" align = "สิทธิ" บรรณาธิการ = "{ประเภท: 'numberbox' ตัวเลือก: {ความแม่นยำ: 1}}"> ราคา </ TH>
<Th ฟิลด์ = "จำนวน" width = "80" align = "สิทธิ" บรรณาธิการ = "{ประเภท: 'numberbox' ตัวเลือก: {ความแม่นยำ: 0}}"> จำนวน </ TH>
<ฟิลด์ Th = "unitcost" width = "80" align = "สิทธิ" บรรณาธิการ = "numberbox"> ต้นทุนต่อหน่วย </ TH>
<Th ฟิลด์ = "ATTR1" width = "150" บรรณาธิการ = "text"> แอตทริบิวต์ </ TH>
<Th ฟิลด์ = "สถานะ" width = "60" align = "center" บรรณาธิการ = "{ประเภท: 'ช่องทำเครื่องหมาย" ตัวเลือก: {เมื่อ:' P 'ปิด' '}} "> สถานะ </ TH>
</ tr>
</ thead>
</ table>
เมื่อผู้ใช้คลิกที่แถวที่เราเริ่มต้นการดำเนินการแก้ไข
var lastIndex;
$ ( '# Tt'). Datagrid ({
onClickRow: ฟังก์ชั่น (rowIndex) {
ถ้า (lastIndex! = rowIndex) {
$ ( '# Tt') DataGrid ( 'EndEdit' lastIndex) .;
$ ( '# Tt') DataGrid ( 'BeginEdit' rowIndex) .;
setEditing (rowIndex);
}
lastIndex = rowIndex;
}
});
เพื่อสร้างความสัมพันธ์ระหว่างการดำเนินการของบางคอลัมน์ที่เราควรจะได้รับการแก้ไขในปัจจุบันและผูกให้พวกเขาบางส่วนของเหตุการณ์ดังกล่าวข้างต้น
ฟังก์ชั่น setEditing (rowIndex) {
var บรรณาธิการ = $ ( '# TT') DataGrid ( 'getEditors' rowIndex) .;
var priceEditor = บรรณาธิการ [0];
var amountEditor = บรรณาธิการ [1];
var costEditor = บรรณาธิการ [2];
priceEditor.target.bind ( 'เปลี่ยน' ฟังก์ชั่น () {
คำนวณ ();
});
amountEditor.target.bind ( 'เปลี่ยน' ฟังก์ชั่น () {
คำนวณ ();
});
ฟังก์ชั่นการคำนวณ () {
ค่าใช้จ่าย var = priceEditor.target.val () * amountEditor.target.val ();
$ (CostEditor.target) .numberbox ( 'setValue' ค่าใช้จ่าย);
}
}