EasyUI

效果显示：

同上次博文效果。

html代码：

同上次博文代码。

js代码：

• align: 'center',//标题和内容居中
• resizable: false,//不允许改变大小
• //hidden:true,//隐藏该列

• fitColumns: false,//是否自适应宽度（出现滚动条）
• loadMsg: '正在努力加载，请稍后………………',//显示加载提示信息
• rownumbers: true,//显示行号
• //showHeader: false,//是否显示行头（标题）
• //showFooter:false,//显示行尾，默认情况下不显示，要在后台使用json数据传递

$(function () {
    $('#tab').datagrid({

        //===================================== 样式 ===============================================//
         500,//宽度
        title: '信息列表',//标题名
        iconCls: 'icon-search',//图标
        singleSelect: true,//是否单选
        striped: true,//是否开启斑马线
        fitColumns: false,//是否自适应宽度（出现滚动条）
        loadMsg: '正在努力加载，请稍后………………',//显示加载提示信息
        rownumbers: true,//显示行号
        //showHeader: false,//是否显示行头（标题）
        //showFooter:false,//显示行尾，默认情况下不显示，要在后台使用json数据传递
        //==========================================================================================//



        //============================= 加载数据，要显示的字段 =========================================//
        //要加载的数据
        url: "../Json/datagridjson.ashx",
        //要显示的列
        columns: [[
            {
                field: 'id',
                title: '编号',
                align: 'center',//标题和内容居中
                resizable: false,//不允许改变大小
                //hidden:true,//隐藏该列
            },
            {
                field: 'name',
                title: '姓名',
                halign: 'center',//仅标题居中

                //显示数据的时候，格式化数据
                formatter: function (value, row, index) {
                    return '[ ' + value + ' ]';
                },
            },
            {
                field: 'sex',
                title: '性别'
            },
            //在字段中使用排序，每点击一次，都会向后台POST要排序的字段和正序还是倒序排列。
            {
                field: 'createtime',
                title: '创建时间',
                sortable: true,//允许排序
            }
        ]],
        //==========================================================================================//





        //===================================== 分页 ===============================================//
        //显示分页控件栏
        pagination: true,
        pageNumber: 1,//初始化的时候在第几页
        pageSize: 5,//，每页显示的条数
        pageList: [5, 10, 15],//每页显示的条数
        //==========================================================================================//





        //===================================== 排序 ===============================================//
        //通过POST传递到后台，然后进行排序。
        sortName: 'createtime',
        sortOrder: 'desc',
        //==========================================================================================//





    });
})