Jquery EasyUI Datagrid的选取

中文API地址:

http://www.cnblogs.com/Philoo/archive/2011/11/16/jeasyui_api_datagrid.html

接近于Extjs的轻量级Jquery插件

运用进程蒙受标题:

一.Q:demo中,数据绑定的json不帮衬汉语

 奥德赛: 只要把公文另存,编码格式从ascii改成utf-八就行

贰.Q:Datagrid url数据源绑定

 R: 字符串:$(“#table”).datagrid(‘loadData’,json对象)

   url:假诺应用ajax,能够用ashx文件,只怕mvc
的jsonresult路径,只要回到json字符串就可以

3.Q:为Datagird添加Icon图标

 卡宴:把easyui的demo
icon.css拷贝到祥和的档次中,在样式里,更改路径,调用形式,如:<input
type=’button’ iconCls=’icon-look’ />

4.Q:  复杂的datagird设置

图片 1图片 2View Code

$("#table").datagird({
    //不设置其他属性
    fit:true,  //表格随窗体大小改变
    url:"MeesageHandler.ashx?.....",
    pageSize:20,
    frozenColumns:[[     //必要列
        {field:'ID',checkbox:true,width:100,align:'center'},
        {field:'Name',title:'名称',sortable:true,
          ,formatter:function(value,rec)
           {
               if(value.length>30)
                  return value.substring(0,30);
              else
                  return value;
            }
        }
    ]],
    columns:[[//设置跟frozen一样]]
    //属性具体参加中文api
});    

五.Q:  多少个第叁事件采纳

onRowContextMenu:function(data,index){  //表格右键触发

  var selected=$(“#table”).datagrid(‘getRows’); //获取具有行集合对象

  selected[index].ID //index为近期右键行的目录,指向当前行对象

  //你也可以这里运用easyui的contextmenu,来完善右键使用功用的全面

},

onDblClickRow:function(index,data){}

onLoadSuccess:function(data){}

5.Q: 分页的安装以及分页的改动

图片 3图片 4View Code

var p=$("#table").datagrid('getPager');
if(p)
{
  $(p).pagination({
      pageSize:10,  //这个是页面板的设置,具体显示还得在datagrid里的pageSize属性设置。
      pageList:[10,20,50,100],
      beforePageText:'第',
      afterPageText:'页    共{pages}页',
      displayMsg:'当前显示{from}-{to} 条记录   共{total}条记录'  
  });
}

陆.Q:   url路径引用时,路径接到的request请求参数,分页不用安装

request.params[“page”]   //当前页码

request.params[“rows”]   //页面展现数据数

request.params[“sort”]   //排体系名

request.params[“order”]   //倒序or升序

 七.Q: datagrid的详细分页

 

var grid = $(‘#datagrid’);  

var options = grid.datagrid(‘getPager’).data(“pagination”).options;  

var curr = options.pageNumber;  

var total = options.total;  

var max = Math.ceil(total/options.pageSize);

 

 

.pagination 生成贰个页码工具条。

质量如下:
一)total:当分页条创制后安装的记录数。私下认可一。
2)pageSize:页面大小。默许十。
三)pageNumber:当分页创设后呈现的页码。默许一。
肆)pageList:用户能改变页面包车型大巴大大小小。您也得以变更该属性定义的暗中认可大小。暗中认可[10,20,30,50]。
5)loading:定义是不是正在加载。私下认可false。
六)buttons:定义自定义按钮,各个按钮都包涵两性子情:
iconCls: 该CSS类将体现3个背景图标。
handler: 当按钮点击时触发2个处理函数。
七)beforePageText:当输入组件前显示二个标签文本。
8)afterPageText:当输入组件后显得贰个标签文本。
玖)displayMsg:展现一个页面音讯。
方式如下:
一)onSelectPage:当用户挑选多少个新页面时激活。该回调函数包蕴多少个参数:
pageNumber: 该新页面包车型大巴页码。
pageSize:该新页面包车型地铁大小