Jquery Easyui Datagrid創建代碼

引用easyui

<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<link rel="stylesheet" type="text/css" href="demo.css">
<script type="text/javascript" src="../jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>

javascript代碼

$(function(){
    $('#tt').datagrid({
        url:'datagrid_data2.json',
        columns:[[
            {   field:'productid',
                title:'Product ID',
                width:120
                //rowspan:2
                //colspan:2
                //align:'center'
                //sortable:true
                //resizable:true
                //hidden:true
                //checkbox:true
                //formatter:function(value,row,index){}
                //styler:function(value,row,index){}
                //sorter:function(a,b){ }
                //editor:string,object

            },

            {field:'listprice',title:'List Price',width:80,align:'right'},
            {field:'unitcost',title:'Unit Cost',width:80,align:'right'},
            {field:'attr1',title:'Attribute',width:250},
            {field:'status',title:'Status',width:60,align:'center'}
        ]],
        frozenColumns:[[
               {field:'ck',checkbox:true},
               {field:'itemid',title:'Item ID',width:80,sortable:true}
        ]],
        //fitColumns:false,//true會導致列錯位
        //autoRowHeight:true,
        toolbar:[{
            iconCls: 'icon-edit',
            text:'編輯',
            handler: function(){alert('edit')}
        },'-',{
            iconCls: 'icon-help',
            text:'幫助',
            handler: function(){alert('help')}
        }],
        //striped:true,//條紋行，以區分行
        //method:'post',
        //nowrap:true,//false設置數據自動換行
        //idField:'itemid',
        loadMsg:'請稍候...',
        pagination:true,//分頁欄
        rownumbers:true,//第一列顯示自增序列
        singleSelect:true
        //checkOnSelect:true,
        //selectOnCheck:true,
        //pagePosition:'both',
        //pageNumber:1,
        //pageSize:10,
        //pageList:[10,20,30,40,50],
        //queryParams: {
        //  name: 'easyui',
        //  subject: 'datagrid'
        //},
        //sortName:'itemid',
        //sortOrder:'desc',
        //remoteSort:false,//true發送命令到服務器請求排序數據，false本地自己排序
        //showHeader:true,
        //showFooter:true,
        //scrollbarSize:18,
        //rowStyler:function(index,row,css){}
        //loader:'json loader',
        //loadFilter:function(data){}
        //editors:'predefined editors',
        //view:'default view'
    });
    //設置分頁控件
    $('#tt').datagrid('getPager').pagination({
        pageSize: 10,//每頁顯示的記錄條數，默認爲10
        pageList: [5,10,15],//可以設置每頁記錄條數的列表
        beforePageText: '第',//頁數文本框前顯示的漢字
        afterPageText: '頁    共 {pages} 頁',
        displayMsg: '當前顯示 {from} - {to} 條記錄   共 {total} 條記錄'
        /*onBeforeRefresh:function(){
            $(this).pagination('loading');
            alert('before refresh');
            $(this).pagination('loaded');
        }*/
    });
});

 

html代碼

<table id="tt"></table>