jqgrid " />

扫描二维码下载沐宇APP

沐宇

微信扫码使用沐宇小程序

沐宇

jqgrid濡備綍瀹炵幇鍥介檯鍖?

扬州沐宇科技
2024-06-26 17:27:50
jqgrid

瑕佸疄鐜癹qGrid鐨勫浗闄呭寲锛屽彲浠ユ寜鐓т互涓嬫楠よ繘琛屾搷浣滐細

  1. 鍦ㄥ紩鍏qGrid鐨凧avaScript鏂囦欢涔嬪墠锛屽紩鍏Query鐨勫浗闄呭寲鏂囦欢锛屼緥濡傦細
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/i18n/jquery-ui-i18n.min.js"></script>
  1. 鍦ㄥ紩鍏qGrid鐨凧avaScript鏂囦欢涔嬪墠锛屽紩鍏qGrid鐨勮瑷€鍖呮枃浠讹紝渚嬪锛?/li>
<script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.5/js/i18n/grid.locale-en.js"></script>
  1. 鍦ㄥ垵濮嬪寲jqGrid鏃讹紝璁剧疆璇█閫夐」涓哄搴旂殑鍥介檯鍖栬瑷€锛屼緥濡傦細
jQuery("#grid").jqGrid({
    url:'your_data.json',
    datatype: "json",
    colModel: [
        { name: "id", index: "id", width: 55 },
        { name: "name", index: "name", width: 90 }
    ],
    rowNum: 10,
    rowList: [10, 20, 30],
    pager: '#pager',
    sortname: 'id',
    viewrecords: true,
    sortorder: "desc",
    caption: "My First Grid",
    height: '100%',
    autowidth: true,
    shrinkToFit: false,
    loadtext: "Loading...",
    multiselect: true,
    jsonReader: {
        root: "rows",
        page: "page",
        total: "total",
        records: "records",
        repeatitems: false,
        id: "id"
    },
    prmNames: {
        page: "page",
        rows: "rows",
        sort: "sidx",
        order: "sord",
        search: "_search",
        nd: "nd",
        id: "id",
        oper: "oper",
        editoper: "edit",
        addoper: "add",
        deloper: "del",
        subgridid: "id",
        npage: null,
        totalrows: "totalrows"
    }
}).jqGrid('navGrid','#pager',{edit:false,add:false,del:false});

鍦ㄤ笂闈㈢殑渚嬪瓙涓紝璁剧疆浜?code>loadtext涓?quot;Loading鈥?quot;锛岃繖鏍峰湪鍔犺浇鏁版嵁鏃朵細鏄剧ず"Loading鈥?quot;鐨勫浗闄呭寲鏂囨湰銆?/p>

閫氳繃浠ヤ笂姝ラ锛屽氨鍙互瀹炵幇jqGrid鐨勫浗闄呭寲浜嗐€傛偍鍙互鏍规嵁鍏蜂綋闇€姹傝缃洿澶氱殑鍥介檯鍖栨枃鏈拰璇█鍖呮枃浠躲€?/p>

扫码添加客服微信