ดาวน์โหลด jquery tabledit - ดาวน์โหลด jquery tabledit ซอร์สโค้ด

jquery tabledit

หมวดหมู่อื่นๆ

v1.2.7

ดาวน์โหลด

jQuery-Tabledit เวอร์ชัน 1.2.7

เครื่องมือแก้ไขแบบอินไลน์สำหรับตาราง HTML ที่เข้ากันได้กับ Bootstrap Tabledit ใช้ Ajax เพื่อบันทึกแถวใหม่และสำหรับแก้ไขและลบแถว

ปลั๊กอินทำงานร่วมกับปลั๊กอินอื่นๆ:

ปลั๊กอิน DataTable

คุณสามารถแทรกแท็กประเภทต่างๆ ได้

เพิ่มเติมในตัวอย่างที่ 7 บน https://bluesatkv.github.io/jquery-tabledit/#examples7

คุณสามารถเพิ่มแถวใหม่ลงในตารางได้

เพิ่มเติมในตัวอย่างที่ 9 บนhttps://bluesatkv.github.io/jquery-tabledit/#examples9-10

การใช้งานขั้นพื้นฐาน

เพิ่มปลั๊กอิน jQuery tabledit หลังไลบรารี jQuery

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="jquery.tabledit.js"></script>

สร้างตาราง Bootstrap พร้อมข้อมูล

 <table class="table table-hover" id="my-table">
    <thead>
        <tr>
            <th>Id</th>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
            <th>Column 4</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Data 1</td>
            <td>Data 2</td>
            <td>Data 3</td>
            <td>Data 4</td>
        </tr>
    </tbody>
</table>

เรียกปลั๊กอินบนตารางที่มีอยู่ของคุณและระบุคอลัมน์ที่สามารถแก้ไขได้ตามที่คุณต้องการ

 $('#my-table').Tabledit({

    columns: {
      identifier: [0, 'id'],                    
      editable: [[1, 'col1'], [2, 'col1'], [3, 'col3'], [4, 'col4']]
    }

});

ตัวอย่าง

ค่าอ่านอย่างเดียวใน TD

คุณตั้งค่านี้ในอาร์เรย์ที่แก้ไขได้ หากคุณต้องการอ่านอย่างเดียว ให้ปล่อยคอลัมน์ออกจากอาร์เรย์ 'แก้ไขได้' เช่น คอลัมน์ 3 จะไม่สามารถแก้ไขได้

 $('#my-table').Tabledit({

    columns: {
      identifier: [0, 'id'],                    
      editable: [[1, 'col1'], [2, 'col1'], [4, 'col4']]
    }

});