关于Jquery-easyUi的常用用法

1 篇文章 0 订阅
技术基础文件
模板文件引入
jquery-1.8.3.min.js,jquery.alerts.js
jquery.json-2.4.js(字符处理,编码解码,兼容ie)
jquery-ui-1.9.2.custom.min.js,jquery-ui-1.9.2.custom.min.css
jquery.easyui.min.js,easyui.css,validator.js (输入框校验),icon.css(按钮样式)

基础工具
1.  消息提示
a>  $.messager.defaults = {ok : "确定",cancel : "取消"};
对messager控件处理按钮字符
b>  提示框
$.messager.show({
    title : title,
    msg : msg,
    showType : 'slide', //展示类型
    timeout : time
});

2.  日期


3.  下拉框
$('#appKey').combobox({
    url : ‘url',
    valueField : id, //id
    textField : value,//值
    editable:false,
    onLoadSuccess : function() { // 加载完成后,设置选中第一项
        var val = $(this).combobox("getData");
        // 随机显示
        for (var item in val[0]) {
            if (item == "appKey") {
                $(this).combobox("select", val[0][item]);
            }
        }
    }
});

分页
1.  前端页面
<div class="list">
   <div class="listBar" style="text-align:left;">
        <h1><span class="icon">&nbsp;</span>页面标题</h1>
   </div>
<!-- 查询条件 -->
<div id="tb" style="padding:5px;height:auto;margin-top:10px;">
          <div>
<span class="soutile">条件一: </span>
<input class="easyui-textbox" value="" style="width:120px;height:15px" />
<span class="soutile">条件二: </span>
<input class="easyui-textbox"  value="" style="width:120px;height:15px" >
<span class="soutile">条件三:</span>
<select class="easyui-combobox"  panelHeight="auto" style="width:100px" >
</select>
<a href="" class="easyui-linkbutton" iconCls="icon-search">查询</a>
</div>
</div>
<!--分页表格采用easyUI datagrid -->
<div style="margin:auto;text-align:center;">
<table id="dg" style="height:500px"></table>
</div>
</div>
2.  Js
到后台的页数属性名是page,数据量是rows
$('#dg').datagrid({
        title : '批发商品池管理',
        url : dataUrl, //数据源
        rownumbers : true, //行数
        pagination : true, //分页
        fitColumns:false, //横向滚动条
        nowrap : true,// 设置为true,当数据长度超出列宽时将会自动截取
        striped : true,// 设置为true将交替显示行背景。
        pageSize : 5,
        loadMsg : "", //远程加载提示语,正在努力加载数据,请稍后...
        pageNumber : 1,
        pageList : [5, 10, 20, 50],
        queryParams : {
            //请求参数
        },
        columns : [[{
                    field : 'ck',
                    checkbox : true
                }, {
                    field : 'optAccount',
                    title : '操作ID',
                    width : 75,
                    align : 'center'
                }, {
                    field : 'auditType',
                    title : '操作形式',
                    width : 65,
                    align : 'center',
                    formatter : function(value, rec) {
                        //处理数据
                    }
                }
]],
        singleSelect : false,
        selectOnCheck : true,
        checkOnSelect : true,
        toolbar : [{
                    text : '返回',
                    iconCls : 'icon-back',
                    handler : function() {
                        //方法
                    }
                }, '-', {
                    text : '通过',
                    iconCls : 'icon-redo',
                    handler : function() {
                        //方法
                    }
                }],
        onLoadSuccess : function(data) {
        }
    }).datagrid('getPager').pagination({
        pageSize : 5,// 每页显示的记录条数,默认为10
        // pageList: [5,10,20,15],//可以设置每页记录条数的列表
        beforePageText : '第',// 页数文本框前显示的汉字
        afterPageText : '页    共 {pages} 页',
        displayMsg : '当前显示 {from} - {to} 条记录   共 {total} 条记录'
        ,onChangePageSize:function(){  //改变pagesize触发事件
            var pager = $('#dg').datagrid('getPager');
                pager.pagination('refresh', {
                        pageNumber : 1
                });
        }
        });

3.  Java 
Gcms标准分页查询
// 页数
   String page = request.getParameter("page");
   // 数据量
   String rows = request.getParameter("rows");
   if (!StringUtils.isBlank(page)) {
       // 展示数据量
       pager.setPageSize(Integer.parseInt(rows));
       // 页数
        pager.setPageNumber(Integer.parseInt(page));
   }
// bo查询条件
   QueryResult<GcWholeSaleProductAuditBo> querylist = Service.query (pager,
                bo);
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值