zoukankan      html  css  js  c++  java
  • Jquery easyUI 基础——datagrid的简单使用

    使用easyUI需要先引入以下文件:

    <link rel="stylesheet" type="text/css" href="../../css/default/easyui.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/icon.css"/>
    <script src="../js/jquery-1.10.2.js" type="text/javascript" charset="utf-8"></script>
    <script src="../js/jquery.easyui.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="../js/easyui-lang-zh_CN.js" type="text/javascript" charset="utf-8"></script>

    表格的创建可以直接使用<table>标签,也可以使用JavaScript创建:

    通过<table>标签创建DataGrid控件:

    <table class="easyui-datagrid" style="400px;height:250px"   
            data-options="url:'datagrid_data.json',fitColumns:true,singleSelect:true">   
        <thead>   
            <tr>   
                <th data-options="field:'code',100">编码</th>   
                <th data-options="field:'name',100">名称</th>   
                <th data-options="field:'price',100,align:'right'">价格</th>   
            </tr>   
        </thead>
        <tbody>   
            <tr>   
                <td>001</td><td>名称1</td><td>2323</td>   
            </tr>   
            <tr>   
                <td>002</td><td>名称2</td><td>4612</td>   
            </tr>   
        </tbody>       
    </table>  

    使用Javascript去创建DataGrid控件:

    $('#dg').datagrid({    
        url:'datagrid_data.json',    
        columns:[[    
            {field:'code',title:'代码',100},    
            {field:'name',title:'名称',100},    
            {field:'price',title:'价格',100,align:'right'}    
        ]]    
    });  

    可以通过在<table>标签中通过dataoption或者JavaScript中对表格进行属性设置。

    下面是一个带有分页功能的表格:

    需要将pagination属性设置为TRUE

    //第一种方式在表格标签中添加如下代码
    data-options="pagination:true”
    
    //第二种方式在JavaScript中设置
    $(function(){
        $("#tb").datagrid({
                    
            pagination:true,
                    
        });
                
     })

     更多属性设置可以查看帮助文档。

     下图为一个请求到数据的表格:

  • 相关阅读:
    第十一周项目6-回文&素数(一)
    第十一周项目1-函数版星号图(三) .
    囚徒困境 For BBasic
    第十一周项目5-当年第几天
    第十一周项目4-特殊三位数
    第十一周项目3-程序的多文件组织
    第十一周项目2-求最大公约数
    第十一周项目1-函数版星号图(二)
    第十一周项目1-函数版星号图(一)
    第十周-囚徒困境
  • 原文地址:https://www.cnblogs.com/greedymonkey/p/7107270.html
Copyright © 2011-2022 走看看