美文网首页
easyui datagrid的简单使用

easyui datagrid的简单使用

作者: 小小机器人 | 来源:发表于2016-11-07 13:00 被阅读181次
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="easyui/jquery.min.js"
    charset="utf-8"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"
    charset="utf-8"></script>
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"
    charset="utf-8"></script>

<link rel="stylesheet" type="text/css"
    href="easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">

</head>
<body>
    <!-- 通过html的方式(不推荐) -->
    <!--    <table class="easyui-datagrid"> -->
    <!--        <thead> -->
    <!--            <tr> -->
    <!--                <th data-options="field:'code'">编码</th> -->
    <!--                <th data-options="field:'name'">名称</th> -->
    <!--                <th data-options="field:'price'">价格</th> -->
    <!--            </tr> -->
    <!--        </thead> -->
    <!--        <tbody> -->
    <!--            <tr> -->
    <!--                <td>001</td> -->
    <!--                <td>name1</td> -->
    <!--                <td>2323</td> -->
    <!--            </tr> -->
    <!--            <tr> -->
    <!--                <td>002</td> -->
    <!--                <td>name2</td> -->
    <!--                <td>4612</td> -->
    <!--            </tr> -->
    <!--        </tbody> -->
    <!--    </table> -->

    <table id="dg"></table>
    <script type="text/javascript">
        $('#dg').datagrid({
            url : 'datagrid_data.json',
            /* data: [
                    {productid:'value11', productname:'value12'},
                    {productid:'value21', productname:'value22'}
                ],
                直接给出数据 */
            width:500,
            fitColumns:true,
            /* 会自动让列宽平均分配来占满datagrid */
            
            /* loadMsg:'正在加载数据...',
            从远程站点加载数据时显示 */
            
            rownumbers:true,
            /*显示行列号*/
            
//          singleSelect:true,
            /* 只允许显示一行 */
            
            pagination:true,
            /*显示分页栏*/
            
//          pageNumber:2,
            /* 在设置分页属性的时候初始化页码 */
            
            pageSize:5,
            /*在设置分页属性的时候初始化页面大小*/
            
            pageList:[5,15,20,25],
            /* 在设置分页属性的时候 初始化页面大小选择列表(和上一个属性搭配使用) */
            
            sortName:'unitcost',
            sortOrder:'desc',
            remoteSort:false,
            /*某列排序的条件,设置上面三个属性,在列属性中开启sortable*/
            
            rowStyler: function(index,row){
                if (row.unitcost>20){
                    return 'background-color:#6293BB;color:#fff;';
                }
            },
            /* 修改满足条件数据所在行的style */
    
            //字段
            columns : [ [
                {field : 'cb',checkbox:true},/* 设置复选框需也需要一个字段*/             
                {field : 'productid',title : '产品编号',width : 100}, 
                {field : 'productname',title : '产品名',width : 100}, 
                {field : 'unitcost',sortable:true,title : '单价',width : 100,align : 'right'}
             ] ],
            toolbar: [{  //工具条
                iconCls: 'icon-add',
                text:'添加',
                handler: function(){
                    $('#dg').datagrid('appendRow',{
                        productid: '11',
                        productname: '最屌手机',
                        unitcost: 1000
                    });
                }
            },'-',{
                iconCls: 'icon-edit',
                text:'编辑',
                handler: function(){
                    $('#dg').datagrid('updateRow',{
                        index: 0,
                        row: {
                            productid: '100',
                            productname: 'iphone',
                            unitcost:2000
                        }
                    });


                }
            },'-',{
                iconCls: 'icon-remove',
                text:'删除',
                handler: function(){
                    //获取勾选项所在行
                    var rows = $("#dg").datagrid('getSelections');
                    for(var i=0;i<rows.length;i++){
                        //返回指定行的索引
                        var index = $("#dg").datagrid('getRowIndex');
                        //删除指定索引行
                        $("#dg").datagrid('deleteRow',index);
                    }
                    
                    //取消选中所有行
                    $("#dg").datagrid('unselectAll');
                }
            },'-',{
                iconCls: 'icon-search',
                text:'<input type="text" value="">查询',
                handler: function(){alert('查询')}
            }],


            //单击事件(rowData代表该行的信息)
            onCheck:function(index,rowData){
                alert(rowData.productid);
                alert(rowData.productname);
                alert(rowData.unitcost);
            }

        });
    </script>
</body>
</html>
datagrid.gif

相关文章

网友评论

      本文标题:easyui datagrid的简单使用

      本文链接:https://www.haomeiwen.com/subject/cdkouttx.html