页面-UI-easyUI--表格

一、创建表格

　　两种方式：

　　　第一种：使用现有表格

<table class="easyui-datagrid" style="width:400px;height:250px" data-options="url:'datagrid_data.json',fitColumns:true,singleSelect:true">

    <thead>
        <tr>
            <th data-options="field:'code',width:100">编码</th>
            <th data-options="field:'name',width:100">名称</th>
            <th data-options="field:'price',width:100,align:'right'">价格</th>
        </tr>
    </thead>
</table>

 

　　　第二种：使用Javascript

<table id="dg"></table>

使用JavaScript创建表格

 $('#dg').datagrid({
            columns:[[
                {field:'id',title:'id',width:100},
                {field:'name',title:'名称',width:100},
                {field:'password',title:'密码',width:100},
                {field:'age',title:'年龄',width:100},
                {field:'gender',title:'性别',width:100},
            ]],

        });

 

 

二、表格设置

表格显示复选框

 

$('#dg').datagrid({
            frozenColumns:[[
                {field:'ck',checkbox:true}
            ]],//表格前是否有复选框
            singleSelect:true,//单选多选
        });

 

 

 

三、表格赋值

：

$('#dg').datagrid({
                    data: json.data
                });

表格数据格式json

[
        {f1:'value11', f2:'value12'},
        {f1:'value21', f2:'value22'}
    ]

 

四、表格工具栏

 

$('#dg').datagrid({//表格id
            toolbar: [{
                id:'dataAdd',
                text: '添加',
                iconCls: 'icon-add',
                handler: function() {
                    window.location.href = "http://localhost:8887/free_insurance/page/demo/html/add.html";
                    return false;//页面跳转必须加，否则页面无跳转
                }
            }, '-', {
                id:'dataEdit',
                text: '修改',
                iconCls: 'icon-edit',
                handler: function() {
                    window.location.href = "http://localhost:8887/free_insurance/page/demo/html/update.html";
                }
            }, '-',{
                id:'dataDel',
                text: '删除',
                iconCls: 'icon-cancel',
                handler: function(){
                    var id=getSelections();
                    alert(id);
                    
                }
            }],//工具栏
        });

 五、表格更新：

如果datagrid下有分页插件：请求参数：

page=1，

rows=10,

username="zhangsan"

        $("#tableData").datagrid('options').url = "";
        // 重新加载查询表单
        $("#tableData").datagrid("load", {
            username: "zhangsan",
            onLoadSuccess: function () {

            }
        });