zoukankan      html  css  js  c++  java
  • easyui datagrid 使用

    <div class="col-xs-12">
        <div class="box box-info">
            <div class="box-header with-border">
                <h3 class="box-title">考试列表</h3>
            </div>
            <div class="box-body">
                <!-- 这里写表格。。 -->
                <table id="dg">
                </table>
            </div>
        </div>
    </div>
    
    <!-- 工具栏 -->
    <div id="toolbar" >
        <form id="tool" onsubmit="return false">
            <label>工号 :</label> <input name="uno" type="number" /> | 
            <label>姓名 :</label> <input name="rname" type="text" /> | 
            <label>部门 :</label> 
                <select style="height:24px;font-size:13px;150px;" id="deptId" name="deptId">
                    <option value="0">请选择部门</option>
                    @for(item in orgas!){
                        <option value="${item.id}">${item.oname}</option>
                    @}
                </select>
            <button style="padding: 0 14px;height: 26px;" onclick="Search()" type="button" class="btn btn-info"><i class="fa fa-search">&nbsp;</i>搜索</button>
        </form>
    </div>
    
    
    
    
    <script>
    var queryParameter={}
    $('#dg').datagrid({
        fitColumns:true,
        '90%',
        pagination:true,
        rownumbers:true,
        sortOrder: "asc",  
        striped:true,
        scrollbarSize:0,
        loadMsg:"正在加载,请稍后。。",
        onLoadError:function(){
            errorAlert("加载失败");
        },
        singleSelect : false, //多选 
      
        resizeHandle:"both",
        
        url:'/admin/examinfo/list/getData',
        toolbar:"#toolbar" ,
        idField:'id',
        //定义列属性
        columns:[[
            {field:'ck',checkbox:'true'},
    
            {field:'name',title:'考试名次',align:'center',"15%"},
            {field:'rname',title:'发布人',align:'center',"15%",
                formatter:function(value,row,index){
                    if(value==undefined||value==''){
                        return "匿名用户"
                    }
                    return value
                }
            },
            {field:'btime',title:"开始时间",align:"center","24%"},
            {field:'etime',title:"结束时间",align:"center","24%",
                
            },
            
             {field:'functions',title:"操作",align:"center","18.5%",
                formatter :function(value,row,index){
                    var auth='<span style="cursor:pointer" class="glyphicon glyphicon-cog" title="修改" onclick="configureAuth('+row.id+')">修改</span>'
                    var delHtml='<span  style="cursor:pointer;color:red" onclick="del('+row.id+')">删除</span>'
                    
                    var separator="&nbsp;&nbsp;|&nbsp;&nbsp;"
                    return auth+separator+delHtml
                }
            }
        ]]
    });
    function configureAuth(id){
        showLayer("/admin/examinfo/update/"+id,"修改知识点信息")
    
    }
    
    
    $('#dg').datagrid('getPager').pagination({  
        pageSize: 10,  
        pageNumber: 1,  
        pageList: [10, 20, 30, 40, 50],  
        beforePageText: '',//页数文本框前显示的汉字   
        afterPageText: '页    共 {pages} 页',  
        displayMsg: '当前显示 {from} - {to} 条记录   共<span style="color:blue"> {total}</span> 条记录'
    });  
    
    // 搜索功能
    function Search() {  
        $('#dg').datagrid("options").queryParams=$("#tool").formObj();  
        $("#dg").datagrid("reload");  
    }  
    function del(rowId){
        
        layerConfirm({
            msg:"你真的要删除吗?请慎重选择。",
            yes:function(){
                onceAct("");
            }
        });
        
    }
    
    
    function enable(id){
        mPost("/admin/module/group/enableGroup.action?id="+id,null,"/admin/module/group/grouplist")
    }
    function disable(id){
        mPost("/admin/module/group/disableGroup.action?id="+id,null,"/admin/module/group/grouplist")
    }
    
    
    </script>

    有分页。有选择很全

  • 相关阅读:
    凸包Graham Scan算法实现
    人与人之间的差距是从大学开始的
    google笔试题两个n维数组logn求中位数问题 zz
    matlab中使用结构体
    人脸识别理论与应用研究 zz
    如果让我再读一次研究生 zz
    Open Yale CourseFinancial MarketNote1 zz
    哈尔小波变换示例
    全屏模式 硬缩放
    APE结合键盘控制角色运动 转
  • 原文地址:https://www.cnblogs.com/whm-blog/p/7273902.html
Copyright © 2011-2022 走看看