jquey easyui 常用方法

Posted 小易的博客

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jquey easyui 常用方法相关的知识,希望对你有一定的参考价值。

 

jquey easyui 常用方法

版本:1.4.2

 

一、easyui -textbox:

1、去空格:

 

[javascript] view plain copy
 
 技术分享技术分享
  1. $(‘#tt1‘).textbox({  
  2.   onChange: function(value){  
  3.   var _trim = $.trim(value);  
  4.     $("#tt1").textbox("setValue", _trim);  
  5.   }  
  6. });  

 

二、combogrid 

1、失去焦点

 

[javascript] view plain copy
 
 技术分享技术分享
  1. $(document).ready(function () {  
  2.           $(‘#cc‘).next().find(":text").blur(function () {   
  3.               alert("1")  
  4.           });  
  5.  });  

2、关于事件

 

 

[javascript] view plain copy
 
 技术分享技术分享
  1. $(‘#cc‘).combogrid({  
  2.         onSelect:function(index,row){  
  3.                           
  4.         },  
  5.         onChange:function(newVal ,oldVal){  
  6.             alert(‘newVal:‘ +newVal);  
  7.             alert(‘oldVal:‘ +oldVal);  
  8.             alert(‘getValue:‘ + $(‘#cc‘).combogrid(‘getValue‘));  
  9.                           
  10.             var g = $(‘#cc‘).combogrid(‘grid‘); // get datagrid object  
  11.         var r = g.datagrid(‘getSelected‘);  // get the selected row  
  12.         if(r ==null)  
  13.         alert(‘null‘);  
  14.         else  
  15.         alert(‘not null‘);  
  16.         }  
  17. });  

三、easyui-datagrid

1、分页:

html:

<table id="dg" class="easyui-datagrid" title="列表" style="width:1050px;height:240px;"
data-options="singleSelect:true">
<thead>
<tr>
<th data-options="field:‘xh‘,width:80,align:‘center‘">序号</th>
<th data-options="field:‘name‘,width:80,align:‘center‘">名称</th>
</tr>
</thead>
</table>
<div class="easyui-panel" style="width:1050px;">
        <div id="pp" class="easyui-pagination" 
        data-options="
        pageSize:20,
        pageList:[20,30,50,100],
        showRefresh:false,
        total:114" ></div>
    </div>

JavaScript:

 

[javascript] view plain copy
 
 技术分享技术分享
  1. var _pageSize =20;  // 每页条数  
  2. var _pageNumber =1; // 当前页   
  3. var _xm =‘‘; // 姓名   
  4. var _start =‘‘; // 开始日期   
  5. var _end =‘‘; // 结束日期   
  6. function getData()   
  7. {   
  8.     var _data = null;   
  9.     $.ajax({  
  10.         type : "post",  
  11.         url : ‘xxxxx/xx/InitGrid‘,  
  12.         data : {‘pageNumber‘: _pageNumber,‘pageSize‘: _pageSize,‘XM‘: _xm,‘start‘: _start,‘end‘ : _end},  
  13.         async : false,  
  14.         success : function(data) {  
  15.             _data = eval("(" + data + ")");  
  16.             }  
  17.         });  
  18.               
  19.         return _data;   
  20.         }   
  21.   
  22. // 主调函数   
  23. function load_grid()   
  24. {   
  25.     var _data = getData();   
  26.     $(‘#dg‘).datagrid({data: _data});  
  27.     paging_grid( _data);   
  28. }   
  29. function paging_grid( _data)   
  30. {   
  31.     $(‘#pp‘).pagination({   
  32.         total: _data.total,   
  33.         onSelectPage: function(pageNumber, pageSize){ _pageNumber = pageNumber; _pageSize = pageSize; load_grid(); }});   
  34. }  
  35. // 重新加载grid  
  36. function refreshGrid() {  
  37.   
  38.     _pageNumber =1;   
  39.     _pageSize = $(‘#pp‘).pagination("pageSize");  
  40.     $(‘#pp‘).pagination({  
  41.         pageSize: _pageSize,  
  42.         pageNumber: _pageNumber  
  43.     });   
  44.       
  45.     load_grid();  
  46. }  
  47.   
  48. // 查询  
  49. function find(){  
  50.   
  51. _xm = $(‘#name‘).textbox(‘getValue‘);  
  52. _start = $(‘#start‘).datebox(‘getValue‘);  
  53. _end = $(‘#end‘).datebox(‘getValue‘);  
  54. refreshGrid();  
  55.    }  
















以上是关于jquey easyui 常用方法的主要内容,如果未能解决你的问题,请参考以下文章

easyui常用方法

easyUi的一些常用方法

EasyUI常用控件禁用方法

EasyUI常用控件禁用方法

常用的easyui使用方法

easyui numberbox一些常用属性,方法