easyui文档阅读笔记(DataGrid 数据表格) 前台展示

datagrid数据表格的一些知识

datagrid基本html写法

1<table class="easyui-datagrid">
    <thead>
        <tr>
            <th data-options="field:'code'">编码</th>
            <th data-options="field:'name'">名称</th>
            <th data-options="field:'price'">价格</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>001</td><td>名称1</td><td>2323</td>
        </tr>
        <tr>
            <td>002</td><td>名称2</td><td>4612</td>
        </tr>
    </tbody>
</table>

2<table class="easyui-datagrid" style="width:400px;height:250px" data-options="url:'datagrid_data.json',fitColumns:true,singleSelect:true">
    <thead>
        <tr>
            <th data-options="field:'code',width:100">编码</th>
            <th data-options="field:'name',width:100">名称</th>
            <th data-options="field:'price',width:100,align:'right'">价格</th>
        </tr>
    </thead>
</table>

自己写的常用的方法
常用做数据管理*.manage.html

<table id="dg" title="电影信息管理" class="easyui-datagrid" 
   fitColumns="true" pagination="true" rownumbers="true" 
   url="/admin/film/list" fit="true" toolbar="#tb">
	<thead>
		<tr>
			<th field="cb" checkbox="true" align="center"></th>
			<th field="id" width="20" align="center">编号</th>
			<th field="imageName" width="50" align="center" formatter="formatImageName">电影图片</th>
			<th field="name" width="100" align="center">电影名称</th>
			<th field="title" width="200" align="center">帖子标题</th>
			<th field="hot" width="50" align="center" formatter="formatHot">热门?</th>
			<th field="publishDate" width="150" align="center">发布日期</th>
	</thead>
</table>
<div id="tb">
  <div>
    <a href="javascript:openFilmModifyTab()" class="easyui-linkbutton" iconCls="icon-edit" plain="true">修改</a>
	<a href="javascript:deleteFilm()" class="easyui-linkbutton" iconCls="icon-remove" plain="true">删除</a>	
  </div>
  <div>
  	&nbsp;电影名称：&nbsp;<input type="text" id="s_name" size="20" onkeydown="if(event.keyCode==13) searchFilm()"/>
  	<a href="javascript:searchFilm()" class="easyui-linkbutton" iconCls="icon-search" plain="true">搜索</a>
  </div>
</div>

效果图如下

DataGrid的属性
(该属性扩展自panel(面板)，下面是DataGrid控件添加的属性)

常用属性有
toolbar 一般用于编辑 修改 删除 工具菜单栏的写法,具体实现如以下文档
rownumbers 行列号设置为true显示行列号
pagination 分页设置为 true
url string类型 一个URL从远程站点请求数据。
fitColumns boolean 真正的自动展开/收缩列的大小，以适应网格的宽度，防止水平滚动。
列属性
DataGrid列是一个数组对象，该元素也是一个数组对象。元素数组里面的元素是一个配置对象，它用来定义每一个列字段。
常用属性有 field width align formatter
属性名 属性值类型 描述 默认值
title string 列标题文本。 undefined
field string 列字段名称。 undefined
width number 列的宽度。如果没有定义，宽度将自动扩充以适应其内容。 undefined
rowspan number 指明将占用多少行单元格（合并行）。 undefined
colspan number 指明将占用多少列单元格（合并列）。 undefined
align string 指明如何对齐列数据。可以使用的值有：‘left’,‘right’,‘center’。
checkbox boolean 如果为true，则显示复选框。该复选框列固定宽度。

<thead>
		<tr>
			<th field="cb" checkbox="true" align="center"></th>
			<th field="id" width="20" align="center">编号</th>
			<th field="imageName" width="50" align="center" formatter="formatImageName">电影图片</th>
			<th field="name" width="100" align="center">电影名称</th>
			<th field="title" width="200" align="center">帖子标题</th>
			<th field="hot" width="50" align="center" formatter="formatHot">热门?</th>
			<th field="publishDate" width="150" align="center">发布日期</th>
	</thead>

事件
事件继承自panel(面板)，以下是DataGrid新增的事件。
用到的事件有onkeydown

<div>
  	&nbsp;电影名称：&nbsp;<input type="text" id="s_name" size="20" onkeydown="if(event.keyCode==13) searchFilm()"/>
  	<a href="javascript:searchFilm()" class="easyui-linkbutton" iconCls="icon-search" plain="true">搜索</a>
  </div>

方法
方法名 参数 描述
load param 加载和显示第一页的所有行。如果指定了’param’，它将取代’queryParams’属性。通常可以通过传递一些参数执行一次查询，通过调用这个方法从服务器加载新数据。
getSelections none 返回所有被选中的行，当没有记录被选中的时候将返回一个空数组。
常用方法load reload
$(’#dg’).datagrid(‘load’,{
code: ‘01’,
name: ‘name01’
});
reload param 重载行。等同于’load’方法，但是它将保持在当前页。
查询电影信息

function searchFilm(){
		$("#dg").datagrid("load",{
			"name":$("#s_name").val()
		});
	}

图片的格式化
拼接路径

function formatImageName(val,row){
		return "<img width=100 height=100 src='/static/filmImage/"+val+"'/>";
	}

修改数据
用到datagrid的getselections属性

function openFilmModifyTab(){
		var selectedRows=$("#dg").datagrid("getSelections");
		if(selectedRows.length!=1){
			$.messager.alert("系统提示","请选择一条要修改的电影！");
			return;
		}
		var row=selectedRows[0];
		window.parent.openTab('修改电影','modifyFilm.html?id='+row.id,'icon-modifyFilm');
	}

删除数据

function deleteFilm(){
		var selectedRows=$("#dg").datagrid("getSelections");
		if(selectedRows.length==0){
			$.messager.alert("系统提示","请选择要删除的数据！");
			return;
		}
		var strIds=[];
		for(var i=0;i<selectedRows.length;i++){
			strIds.push(selectedRows[i].id);
		}
		var ids=strIds.join(",");
		$.messager.confirm("系统提示","您确定要删除这<font color=red>"+selectedRows.length+"</font>条数据吗？",function(r){
			if(r){
				$.post("/admin/film/delete",{ids:ids},function(result){
					if(result.success){
						$.messager.alert("系统提示","数据已成功删除！");
						$("#dg").datagrid("reload");
					}else{
						$.messager.alert("系统提示",result.errorInfo);
					}
				},"json");
			}
		});
	}