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>

有分页。有选择很全

原文地址:https://www.cnblogs.com/whm-blog/p/7273902.html