easyui 一些小技巧

摘要:
},}); 数据网格获取数据url后,$。数据网格分页;2、 在第n页,搜索。使用queryParams方法和datagrid组合参数时,将自动添加page=n,而不是切换到page1方法1:$。数据网格;方法2:使用load方法$dgOrderList。datagrid//&page=1&rows=将自动添加。当param为空对象时:$。datagrid//删除页面和行以外的参数,并设置page=1。个人使用,标记$。messenger确认(“提示”,“您确定要删除所选项目吗?”,功能{if{}})4.禁用的链接按钮不会阻止事件,您需要判断是否{returnfalse;}在事件5、对话框闪存问题中。

一、显示分页(pagination:true)情况下,隐藏每页显示的记录条数的那个select(即pageList),下图箭头

方法1:
onBeforeLoad:function(param){
    $('#'+$(this)[0].id).datagrid('getPager').pagination({
        showPageList:false
    });
},
onLoadSuccess:function(data){
    $('#'+$(this)[0].id).datagrid('getPager').pagination({
        showPageList:false
    });
}

方法2:
onBeforeLoad:function(param){
    $('.pagination-page-list').hide();
},
onLoadSuccess:function(data){
    $('.pagination-page-list').hide();
}

方法3:
css样式:select.pagination-page-list{display:none}

方法4:

$("#dgOrderList").datagrid({
    url:'。。。',
    queryParams:{。。。},
});

写在datagrid获取数据url之后,

        $("#dgOrderList").datagrid('getPager').pagination({
            showPageList: false
        });


二、在第n页,检索,利用queryParams方法,datagrid组装参数时,会自动添加page=n,而不会切换到第1页

方法1:

    $("#dgOrderList").datagrid({
        pageNumber:1,
        url:url,
        queryParams:{key:name,value:value}
    });
方法2:用load方法

    $dgOrderList.datagrid('load',param);//会自动添加&page=1&rows=。。

param为空对象时:$('#dgWorkers').datagrid('load',{});//会去除page、rows以外的参数,且置page=1

三、个人常用,mark一下

    $.messager.confirm('提示','确定要删除所选项目吗?',function(r){

        if (r){}
    })

四、linkbutton的disabled并不阻止事件,需要在事件中进行判断
    if($(this).linkbutton('options').disabled){
            return false;

    }

 

五、 dialog闪现问题。在一个页面使用一个dialog,初始隐藏(closed="true"),但是在页面刷新的一瞬间,这个dialog会显示出来,效果非常难看
方法一:
<div style="display:none">
    <div class="easyui-dialog"></div>
</div>
dialog用一个隐藏div包含起来,一个div包好几个diglog也可以,显示的时候直接dialog('open')就可以

方法二:

设定dialog的style  display:none,然后在页面加载完后再让它display:block或show(),或者$('dialog').show().dialog('open')

 

六、显示尾行合计(图片与下文无关)

    方法一,加载后在js中计算,但对formatter的列无效

//表格定义时显示footer
        showFooter:true,

//定义加载成功事件,列名:数据

        onLoadSuccess:function(data){

$(this).datagrid('reloadFooter', [{
                heJi:'合计',
                tNo:compute(data.rows, "tNo"),
                        workhour:compute(data.rows, "workhour"),
                pay:compute(data.rows, "pay"),
            }]);
         },


    //定义合计函数
    function compute(rows,colName) {
        var total = 0;
        for (var i = 0; i < rows.length; i++) {
            total += parseFloat(isNaN(rows[i][colName])||$.trim(rows[i][colName])==''?0:rows[i][colName]);
        }
        return parseFloat(total.toFixed(2));
    }


    方法二、后台返回一个footer行(PHP为例)


    showFooter:true,

    //footer行对应列要显示的内容,如合计后的内容,可以加一个标识如footer,用于标明改行是footer内容,在formatter时可能会用到
    $footer=array(array('heJi'=>'合计','tNo'=>$tNo,'workhour'=>$workhour,'pay'=>$pay,'footer'=>1));

//返回数据中以footer为键值
    echo json_encode(array('code'=>1,'msg'=>'查询成功','total'=>count($rows),'rows'=>$rows,'footer'=>$footer));
    
    注:footer行的显示同样受formatter影响

七、获得当前选中的tabs

 

1、 var index=$('#tabs').tabs('getTabIndex',$('#tabs').tabs('getSelected')); //从0开始

2、tabs的onSelect改变一个全局变量的值,用于标记选中的tab


免责声明:文章转载自《easyui 一些小技巧》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇remote stacktrace: Backtrace 异常的解决办法机器学习sklearn(四十二):算法实例(十一)分类(五)RandomForestClassifier(二)实例:随机森林在乳腺癌数据上的调参下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

【解决方法】EasyUI DataGrid不显示滚动条时,没有数据的问题

解决方法 于dataGrid例如,下面的代码被添加到的定义:  JavaScript Code  1 2 3 4 5 6 7 8 9 10 onLoadSuccess : function (data) {     if (data.total == 0) {         $('#dg').datagrid('insertRow', {  ...

Easyui datagrid行内【添加】、【编辑】、【上移】、【下移】(转自http://www.cnblogs.com/sword-successful/p/3386861.html,感谢分享)

1、首先大概说下这几个功能里用到的主要方法,行内添加数据主要是添加列的editor属性, 行内编辑主要使用beginEdit(), endEdit(),同时一个关键就是拿到当前的操作行索引editIndex. 2、撤销用到了rejectChanges(). 3、保存时使用getRows()或者getChanges(). getChanges()主要是获取添...

页面多个 swiper 互补冲突

方法一:精简版 $(".swiper-container").each(function(){ $(this).swiper({ loop: true, initialSlide :0, pagination:$('.swiper-pagination',this), nextButt...

EasyUI的datagrid表格行高度增加

这里以easyui的default样式为例: 找到easyui--->themes-->default-->easyui.css-->Ctrl+F找到.datagrid-row--->更改height即可 .datagrid-row {  height: 32px;}...

jQuery EasyUI教程之datagrid应用

一、利用jQuery EasyUI的DataGrid创建CRUD应用       对网页应用程序来说,正确采集和管理数据通常很有必要,DataGrid的CRUD功能允许我们创建页面来列表显示和编辑数据库记录。本教程将教会你如何运用jQuery EasyUI框架来实现DataGrid的CRUD功能 。 我们会用到如下插件: · datagrid: 列表显示数...

目前用到最全的datagrid(easyui)

包含checkbox、复合表头、多行可编辑单元格、combobox单元格,就差上次做的table中每行中的关联检索combobox单元格了。目前已修改为单行编辑,多行编辑时的check有问题$("#add").click(function(){ var index=$('#dataGrid').datagrid('appendRow', {        ...