jquery kaedah jqgrid

JQuery jqGrid ialah pemalam jadual JavaScript yang berkuasa, fleksibel dan boleh disesuaikan Ia dibangunkan menggunakan rangka kerja JQuery dan boleh membantu pengguna mencipta dan mengurus jadual data yang kompleks dengan cepat dan mudah. Ia menyediakan ciri dan fungsi yang kaya seperti halaman, menyusun, mencari, mengedit, menatal dan mengeksport.

JQuery jqGrid digunakan terutamanya untuk paparan jadual data dan penyuntingan dalam aplikasi web. Ia boleh berinteraksi dengan pelbagai sumber data, seperti XML, JSON dan tatasusunan setempat. Pengguna boleh menggunakan pemalam JQuery jqGrid untuk mengubah jadual data yang kompleks kepada antara muka yang mesra pengguna, menjadikan data lebih mudah untuk diurus.

Apakah itu JQuery jqGrid?

JQuery jqGrid ialah pemalam jadual JavaScript berdasarkan rangka kerja JQuery dan projek sumber terbuka. Ia menyokong interaksi dengan berbilang sumber data, boleh mengendalikan sejumlah besar data dan menyediakan pilihan konfigurasi yang lebih fleksibel dan disesuaikan.

Ciri jqGrid JQuery:

1. Sangat boleh disesuaikan dan fleksibel

JQuery jqGrid adalah mudah dan fleksibel untuk digunakan. Pengguna boleh melaraskan rupa bentuk dan kefungsian mengikut keperluan dan pilihan mereka.

2. Memproses sejumlah besar data

JQuery jqGrid boleh mengendalikan sejumlah besar data dan menyokong operasi halaman dan penatalan. Ini sangat meningkatkan kebolehgunaan dan kecekapan borang.

3. Menyokong berbilang format data

JQuery jqGrid boleh berinteraksi dengan berbilang format data, termasuk XML, JSON, tatasusunan setempat, dll.

4. Sokongan pengisihan dan carian

JQuery jqGrid menyediakan fungsi pengisihan dan carian, yang boleh melaksanakan operasi pengisihan dan melakukan carian kompleks berdasarkan data lajur jadual. Ini memudahkan pengguna mencari data yang mereka perlukan.

5. Menyokong pengeditan dan operasi baris

JQuery jqGrid boleh mengedit dan operasi baris. Pengguna boleh mengedit, memadam, menyalin, menampal dan operasi lain dalam jadual dan menyokong penyeretan dan saiz semula baris.

Cara menggunakan JQuery jqGrid

Berikut memperkenalkan cara menggunakan JQuery jqGrid:

1. Memperkenalkan fail JQuery jqGrid

Anda perlu mengimport fail CSS dan JS JQuery jqGrid diperkenalkan ke dalam fail HTML. Contohnya:

<link rel="stylesheet" type="text/css" href="jqgrid/css/ui.jqgrid.css"/>
<script type="text/javascript" src="jqgrid/js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="jqgrid/js/jquery.jqGrid.min.js"></script>

2. Tentukan teg jadual

Takrifkan elemen bekas teg jadual dalam fail HTML, contohnya:

<div id="gridContainer"></div>

3. Tentukan atribut jadual

Tentukan sifat jadual, termasuk URL, nama lajur, lebar lajur dan format data, dsb. Contohnya:

var grid = $("#gridContainer");
grid.jqGrid({
    url: "getData.php",  //请求后台的URL地址
    datatype: "json",   //数据格式
    colNames: ['ID', 'Name', 'Age'],  //列名
    colModel: [           //列的属性
        { name: 'id', index: 'id', width: 55, sorttype: "int" },
        { name: 'name', index: 'name', width: 90 },
        { name: 'age', index: 'age', width: 80, align: "right", sorttype: "float" }
    ],
    rowNum: 10,  //每页显示的记录数目
    rowList: [10, 20, 30],  //每页显示记录数目的选项
    pager: "#gridPager",  //表格分页的容器
    sortable: true,  //是否允许列排序
    multiselect: true,  //是否允许多选
    viewrecords: true,  //是否显示记录数
    width: 780,  //表格宽度
    height: 250  //表格高度
});

4. Jadual Paparan

Paparkan data jadual pada halaman, contohnya:

grid.jqGrid('navGrid','#gridPager',{edit:false,add:false,del:false});

Kaedah biasa JQuery jqGrid:

1. jqGrid()

digunakan untuk memulakan jadual dan menetapkan sifat dan konfigurasi jadual.

2. navGrid()

Menu navigasi untuk mencipta jadual, menyokong operasi seperti menambah, mengedit, memadam dan mencari.

3. getRowData()

Dapatkan data baris yang ditentukan.

4. setRowData()

Tetapkan data baris yang ditentukan.

5. addRowData()

Tambahkan baris data pada jadual.

6. delRowData()

Padamkan data baris yang ditentukan.

7. editRow()

Edit data baris yang ditentukan.

8. saveRow()

Simpan data baris yang ditentukan.

Ringkasan:

JQuery jqGrid ialah alat yang sangat berkuasa, fleksibel dan boleh disesuaikan untuk membangunkan jadual data dalam aplikasi web. Ia menyediakan pelbagai ciri seperti halaman, menyusun, mencari, mengedit, menatal dan mengeksport untuk berinteraksi dengan pelbagai sumber data. Ia mudah digunakan, fleksibel, mampu mengendalikan sejumlah besar data dan sangat boleh disesuaikan. Memahami pelbagai kaedah JQuery jqGrid, kami boleh mengurus dan memaparkan sejumlah besar jadual data dengan lebih baik, menjadikan data lebih mudah untuk diurus, dicari dan dianalisis.

Atas ialah kandungan terperinci jquery kaedah jqgrid. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!