您的位置: 首页  >  IT文章  >  jquery easyui DataGrid 数据表格 属性

jquery easyui DataGrid 数据表格 属性

分类: IT文章 • 2022-08-31 12:20:53

中文帮助请点这里：中文属性详解

以下为未完结版

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <link rel='stylesheet' type='text/css' href='__PUBLIC__/Css/common.css'>
        <link rel="stylesheet" type="text/css" href="http://www.cheap-louisvuittonoutlet.net/easyui/themes/default/easyui.css">
        <link rel="stylesheet" type="text/css" href="http://www.cheap-louisvuittonoutlet.net/easyui/themes/icon.css">
        <link rel="stylesheet" type="text/css" href="http://www.cheap-louisvuittonoutlet.net/easyui/themes/color.css">
        <link rel="stylesheet" type="text/css" href="http://www.cheap-louisvuittonoutlet.net/easyui/demo/demo.css">
        <script type="text/javascript" src="http://www.cheap-louisvuittonoutlet.net/easyui/jquery.min.js"></script>
        <script type="text/javascript" src="http://www.cheap-louisvuittonoutlet.net/easyui/jquery.easyui.min.js"></script>
        <script type="text/javascript" src="js/jquery"></script>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <table id="dg" ></table>
        <div id="tb">
                 <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true">新增</a>
                <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true">编辑</a>
        </div>
        <script type="text/javascript">
            $(document).ready(function(){
                $('#dg').datagrid({
                 columns:[[
                    {field:'categories_id',title:'分类ID:',100},
                    {field:'parent_id',title:'父类id:',100},
                    {field:'date_added',title:'添加时间:',100,align:'right'},
                    {field:'categories_status',title:'状态',100,align:'right'}
                 ]],//columns 列的数组属性
                fitColumns:'true',//当此属性为true时所有列会均匀的充满datagrid的宽度,True 就会自动扩大或缩小列的尺寸以适应表格的宽度并且防止水平滚动
                autoRowHeight:'true',//当true时，根据内容调整表格行的高度
                toolbar:'#tb',//工具栏，指定1个div的id
                striped:'true',//为true就是隔行变色
                nowrap:'true',//True 就会把数据显示在一行里
                method:'post',//请求远程数据的请求方法
                idField:'categories_id',//标识字段,主键的字段
                url:'/index.php/__URL__/getJson',//从远程站点获得数据的 URL默认post过去两个参数page:第几页,rows:每页的条数
                loadMsg:'加载数据的时候,请稍等',//从远处加载数据，正在加载的提示信息
                pagination:true,//为true时显示分页工具栏在datagrid 底部,默认为false
                rownumbers:true,//显示数据表格的行号，默认为false
                singleSelect:false,//为true的时候只能单行选择，默认为false的时候可以选择多行
                ctrlSelect:true,//为true时按着ctrl可以选多行
                pagePosition:'bottom',//设置分页控件的位置，默认为bottom，在griddata的下方  有值'top','bottom','both'.both是上下都显示
                pageNumber:1,//初始化是第几页
                pageSize:10,//每页多少条记录
                pageList:[5,10,20,30,40,50],//每页可显示的条数               
                queryParams:{
                            name: 'easyui',
                            subject: 'datagrid'
                            },//url那个post过去的参数多了这两个参数，默认为空{}
                sortName:'categories_id',//定义哪些列可排序，默认为null
                sortOrder:'desc',//asc 或者desc
                multiSort:'true',//多列排序
                remoteSort:'false',//Defines if to sort data from server
                showHeader:'false',//是否显示行头默认为true
                showFooter:'false',//是否显示脚
                rowStyler:function(index,row){
                    if(index%2==0){
                            return 'color:green';            
                    }                    
                },//行下标可整除2,字体颜色设置成green
                loadFilter:function(data){
                    if(data.d){
                        return data.d;
                    }else{
                         return data;                      
                    }
                },//asp.net 的时候data.d才是所要的json数据
                700,
                title:'测试'               
             });    
            });
                    
        </script>
    </body>
</html>

相关推荐