《jquery easyui总结》由会员分享,可在线阅读,更多相关《jquery easyui总结(7页珍藏版)》请在金锄头文库上搜索。
1、1导入以下包2 Action属性:private JSONObject easyJson;(该属性为必须)并生成 get set 方法控件默认输入两个参数:String page = ServletActionContext.getRequest().getParameter(page);/当前页String rows = ServletActionContext.getRequest().getParameter(rows);/每页显示条数/查询ArrayList easyUIList = baseService.find(from EasyUI);Mpa map = new HashMap
2、();map.put(total, 20);/总条数 total为必须,不可替换map.put(rows, easyUIList);/查询到的数据 rows 为必须,不可替换easyJson = JSONObject.fromObject(map);/ 将 map 对象转换成为 json 对象3Action 配置文件easyJson 注:配置文件中easyJson的与Action中的easyJson是对应的4页面先导入以下文件:$(function() $(#tt).datagrid(/表格IDtitle:-实例- ,iconCls:icon-save,nowrap: false ,/是否只显
3、示一行,即文本过多是否省略部分width:800,height:500,rownumbers:true,/显示行号列queryParams:a:123,b:456,/当请求远程数据发送额外的参数pagination:true, /是否显示分页工具url:easyui/list.do,/请求路径idField:easyJson,/与Action配置文件中的easyJson 对应method:post,columns:title:客户基本信息,colspan:4, title:订购产品,colspan:3, /field 为实体类中对应的属性field:id,title:ID,width:80,a
4、lign:center,field:name,title:姓名,width:80,align:center,field:age,title:年龄 ,width:80,align:center,field:sex,title:性别 ,width:80,align:center,field:type1,title:产品1,width:60,align:center,field:type2,title:产品2,width:60,align:center,field:type3,title:产品3,width:60,align:center););*高级方式*Formatter 为格式化方法(用于对输
5、出的信息进行格式化)他有三个参数:1.value 当前属性的值2Rce 当前行的所有参数列表3Index 当前行的行号columns:field:id,title:ID,width:200,align:center,field:CCompany,title:客户,width:200,align:center,field:null,title:操作,width:200,align:center,formatter: function(value,rec,index) var cname = rec.CCompany;/获取属性值var myid = rec.id; /获取属性值/返回值(也就是该
6、列要显示的信息)return 优惠事宜 +拜访申请+跟进维护; onDblClickRow:, /双击onClickRow:function()/单击var selected = $(#customerFollowList).datagrid(getSelected);/获取选中的行if (selected)alert(2222222+selected.id);alert(3333333+selected.CCompany);参数详细列表Name Type Description Defaulttitle string The datagrid panel title text. DataGr
7、id 的面板标题文字。nulliconCls string A CSS class that will provide a background image to be used as the header icon. 一个 CSS 类,将提供一个背景图片作为标题图标。nullborder boolean True to show datagrid panel border. 真到 DataGrid 中显示面板的边界。truewidth number The width of datagrid width. 宽度的DataGrid 的宽度。autoheight number The heigh
8、t of datagrid height. 该数据网格的高度的高度。autocolumns array The datagrid columns config object, see column properties for more details. DataGrid 的列的配置对象,看到更多的细节列属性。nullfrozenColumns array Same as the columns property, but the these columns will be frozen on left. Columns 属性相同,但将这些列左冻结。nullstriped boolean Tr
9、ue to stripe the rows. True 条纹行。 falsemethod string The method type to request remote data. 该方法要求远程数据类型。postnowrap boolean True to display data in one line. 真正显示在同一行数据。trueidField string Indicate which field is an identity field. 说明哪些字段是一个标识字段。nullurl string A URL to request data from remote site. 一
10、个 URL 请求从远程站点的数据。nullloadMsg string When loading data from remote site, show a prompt message. 当从远程站点加载数据,显示一个提示信息。Processing, please wait 处理中,请稍候pagination boolean True to show a pagination toolbar on datagrid bottom. True 展现出对DataGrid 的底部分页工具栏。falserownumbers boolean True to show a row number colu
11、mn. True 显示行号列。falsesingleSelect boolean True to allow selecting only one row. True 只允许选择一行。falsefit boolean True to set size to fit its parent container. True 设置大小,以适应它的父容器。falsepageNumber number When set pagination property, initialize the page number. 当设置分页属性,初始化的页码。1pageSize number When set pagi
12、nation property, initialize the page size. 当设置分页属性,初始化的页面大小。10pageList array When set pagination property, initialize the page size selecting list. 当设置分页属性,初始化的页面大小选择清单。10,20,30,40,50queryParams object When request remote data, sending additional parameters also. 当请求,远程数据发送额外的参数也。sortName string Def
13、ines which column can be sorted. 可排序的列定义。nullsortOrder string Defines the column sort order, can only be asc or desc. 定义的列的排序顺序,只能是递增或递减。ascEvents Name Parameters DescriptiononLoadSuccess none Fires when remote data is loaded successfully. 触发时,远程数据加载成功。onLoadError none Fires when some error occur to
14、 load remote data. 触发发生时的一些错误加载远程数据。onClickRow rowIndex, rowDataFires when user click a row, the parameters contains: 触发时,用户点击一个行,参数包括:rowIndex: the clicked row index, start with 0 rowIndex:单击的行的索引,从 0 开始rowData: the record corresponding to the clicked row rowData:记录点击相应的行onDblClickRow rowIndex, row
15、DataFires when user dblclick a row, the parameters contains: 当用户触发的 DblClick 一排,参数包括:rowIndex: the clicked row index, start with 0 rowIndex:单击的行的索引,从 0 开始rowData: the record corresponding to the clicked row rowData:记录点击相应的行onSortColumn sort, order Fires when user sort a column, the parameters contains: 当用户触发排序列,参数包括:sort: the sort column field name 排序:排序列字段名称order: the sort column order 订购:排序列顺序onSelect rowIndex, rowDataFires when user select a row, the parameters contains: 触发时,用户选择一行,参数包括:rowIndex: the selected row in