Jquery EasyUI Datagrid的使用

中文API地址：

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

类似于Extjs的轻量级Jquery插件

使用过程遇到问题：

1.Q：demo中，数据绑定的json不支持中文

　R: 只要把文本另存，编码格式从ascii改成utf-8就行

2.Q：Datagrid url数据源绑定

　R: 字符串：$("#table").datagrid('loadData',json对象)

　　 url：如果使用ajax，可以用ashx文件，或者mvc 的jsonresult路径，只要返回json字符串就可以

3.Q：为Datagird添加Icon图标

　R：把easyui的demo icon.css拷贝到自己的项目中，在样式里，更改路径，调用方式，如：<input type='button' iconCls='icon-look' />

4.Q:  复杂的datagird设置

$("#table").datagird({
    //不设置其他属性
    fit:true,  //表格随窗体大小改变
    url:"MeesageHandler.ashx?.....",
    pageSize:20,
    frozenColumns:[[     //必要列
        {field:'ID',checkbox:true,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
});    

5.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:　分页的设置以及分页的修改

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}条记录'  
  });
}

6.Q:   url路径引用时，路径接到的request请求参数，分页不用设置

request.params["page"]   //当前页码

request.params["rows"]   //页面显示数据数

request.params["sort"]   //排序列名

request.params["order"]   //倒序or升序

 7.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 生成一个页码工具条。

属性如下：
1)total:当分页条创建后设置的记录数。默认1。
2)pageSize:页面大小。默认10。
3)pageNumber:当分页创建后显示的页码。默认1。
4)pageList:用户能更改页面的大小。您也可以改变该属性定义的默认大小。默认[10,20,30,50]。
5)loading:定义是否正在加载。默认false。
6)buttons:定义自定义按钮，每个按钮都包含两个属性:
iconCls: 该CSS类将显示一个背景图标。
handler: 当按钮点击时触发一个处理函数。
7)beforePageText:当输入组件前显示一个标签文本。
8)afterPageText:当输入组件后显示一个标签文本。
9)displayMsg:显示一个页面信息。
方法如下:
1)onSelectPage:当用户选择一个新页面时激活。该回调函数包括两个参数:
pageNumber: 该新页面的页码。
pageSize:该新页面的大小