`
past2010
  • 浏览: 12637 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

easyUI -datagrid

 
阅读更多
<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>学生管理系统</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
   
     <link rel="stylesheet" href="js/jquery-easyui-1.2.6/themes/default/easyui.css" type="text/css"></link>
     <link rel="stylesheet" href="js/jquery-easyui-1.2.6/themes/icon.css" type="text/css"></link>
     <script type="text/javascript" src="js/jquery-easyui-1.2.6/jquery-1.7.2.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="js/jquery-easyui-1.2.6/jquery.easyui.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="js/jquery-easyui-1.2.6/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" charset="UTF-8">
  $(function(){
$('#cc').calendar({ 
    width:200, 
    height:200,
    current:new Date() 
}); 
  $('#datagrid').datagrid({ 
    url:'/easy/stu/showAll!findAll',
    //title:'哈哈',
    iconCls:'icon-save',
    loadMsg: '数据载入中,请稍等!',//刷新页面时,显示的提示
    onLoadError: function () {
$.messager.alert('查询反馈:', '查询失败,未找到相关数据!', 'error');
},
// onLoadSuccess:function () {
// $.messager.alert('查询反馈:', '查询成功!', 'success');
//},
    pagination:true,//添加datagrid内部自带的分页工具条
    rownumbers:true,//设置为true将显示行数
    pageNumber:1,
    pageSize:3,//当设置分页属性时,初始化每页记录数。
    pageList:[3,4,5,10],//数组的最小公倍数是pageSize
    singleSelect:false,//可设置多选
    sortName:"id",//数据表格初始化时以哪一列来排序
    fit:true,//datagrid宽高与外层宽高自适应
    fitColumns:false,//默认为true即无滚动条,此处设置为横向有滚动条(列多的时候设置)
    //(设置fitColumns:true,无横向滚动条,适用于列不是很多的时候)
    checkbox:true,
    columns:[[ 
        {
        field:'id',title:'编号',width:85,align:'center',sortable:true,
        }, 
        {
        field:'name',title:'名字',width:55,align:'left',//resizable:true,//该列被缩放
        }, 
        {
        field:'pw',title:'密码',width:40,align:'left',
        } 
    ]],
    //[[]]实现多级表头,多个列合并colspan cellspan等,实际上是二维数组 ,两个中括号可以实现
   // striped:true,
    nowrap:false,//不换行属性设置为true就是不换行,设置为false就换行
    border:false,//设置title下面不显示线
   // border:true,
    idField:'id',//不设置也会自动生成,但是设置了会多一个功能记住选择的多个选项(即实现跨页删除)
    toolbar:[
    {
text:'增加',
iconCls:'icon-add',
handler:function(){
addRow('inVariables');
}
},'-',
{
text:'修改',
iconCls:'icon-edit',
handler:function(){

}
},'-',
{
text:'删除',
iconCls:'icon-remove',
handler:function(){
deleteRows('inVariables');
}
},'-',
{
text:'搜索',
iconCls:'icon-search',
handler:function(){
deleteRows('inVariables');
}
},'-',
],
AllowPaging:true,
});
  });
</script>
</head>
 
  <body style="overflow-y: auto;">
  123
  <div class="easyui-layout" fit="true" border="false">
  <div region="north" border="false" title="学生管理" style="height:110px;overflow:hidden;">
  <table class="datagrid-toolbar" style="width:100%;height: 100%;">
  <tr>
  <th>学生姓名</th>
  <td><input name="name" style="width: 315px;"> </td>
  </tr>
  <tr>
  <th>创建时间</th>
  <td> <input name="createdatetimeStart" class="easyui-datetimebox" editable="false" style="width: 155px;">至
  <input name="createdatetimeEnd" class="easyui-datetimebox" editable="false" style="width: 155px;">
  </td>
  </tr>
  <tr>
  <th>最后修改时间</th>
  <td><input name="modifydatetimeStart" class="easyui-datetimebox" editable="false" style="width: 155px;"/>至
  <input name="modifydatetimeEnd" class="easyui-datetimebox" editable="false" style="width: 155px;">
  <a href="javascript:void(0);" class="easyui-linkbutton" onclick="">查询</a>
  <a href="javascript:void(0);" class="easyui-linkbutton" onclick="">清空条件</a>
  </td>
  </tr>
  </table>
  </div>
  <div title="学生信息" border="false" region="center" >
  <table id="datagrid" pageSize=3></table>
  </div>
  </div>
  </body>
</html>

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics