<link rel="stylesheet" href="../index.css">
    <link rel="stylesheet" href="../bower_components/pager/index.css" media="screen" title="no title" charset="utf-8">
    <script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
    <script type="text/javascript" src="../bower_components/class/index.js"></script>
    <script type="text/javascript" src="../bower_components/pager/index.js"></script>
    <script src="../ligergrid.js"></script>

    require.ansyc("datagrid2");

<div class="main">
    <div id="maingrid" >
    </div>
</div>

 $("#maingrid").datagrid2({
       /*
       * columns列参数
       * source 数据
       * children 详细列表
       * height 高度
       * enabledSort 是否排序
       * */
        columns: [
            { display: 'gouxuan', name: 'checkbox', align: 'left' ,render:function(row){
                return  '<input type ="checkbox" rowid ="' + row.id + '">';
            }},
            { display: '顾客', name: 'CustomerID', align: 'left' },
            { display: '公司名', name: 'CompanyName',align:'left' ,frozen:false},
            { display: '联系人', name: 'ContactName' },
            { display: '地址', name: 'Address' },
            { display: '邮编', name: 'PostalCode' },
            { display: '城市', name: 'City' },
            { display: '操作', name: 'do' ,render:function(){  return  "<input type='text'/>"}}
        ],

        source: {
            ajaxUrl:"./a.json" ,
            type:"post",
            requestData: {
                a:"qeqwe",
                id:"555",
                name:"55kai",
                iPager:4,
                iPerPage:"12"
            },
            dataRowsField:"List",   <!--数据字段名-->
            dataTotalField:"Total", <!--数据总数名-->
            perPager:"iPerPage",     <!--每页个数字段，可以直接写number类型的如：10-->
            currentPageField:"iPager", <!--当前页字段-->
            sortColField:"colNames",  <!--排序请求字段-->
            sortNameField:"sortNames" <!--排序是否为正排序还是反排序字段-->
        },

//        height:500,
        children:{
            showDetail:function(row, detailPanel,callback){
                f_showOrder(row, detailPanel,callback);
            },
//            height:"500",
            closeDetail:function () {

            }
        },
//        enabledSort:false

    }).on("datagrid2:aftershowdata",function (event,data) {
        console.log(event,data,12345)
    }).on("datagrid2:beforeshowdata",function (event,data) {
        console.log(event,data,23456)
    }).on("datagrid2:showDetail",function(){
        console.log(112113123123123131);
    }).on("datagrid2:closeDetail",function(){
        console.log(92829393893);
    }).on("datagrid2:selectrow",function(){
        console.log(arguments,"selectrow");
    }).on("datagrid2:changesort",function(){
        console.log(arguments,"changesort");
    }).on("datagrid2:xhrsuccess",function(){
        console.log(arguments,"xhrsuccess");
    });