1.datagrid使用方法(重要)
1.1将静态html渲染为datagrid样式
<!--方式一: 将静态html渲染为datagrid样式 -->
<table class="easyui-datagrid">
<thead>
<tr>
<th data-options="field:'id'">编号</th>
<th data-options="field:'name'">姓名</th>
<th data-options="field:'age'">年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>001</td>
<td>小明</td>
<td>20</td>
</tr>
<tr>
<td>002</td>
<td>小王</td>
<td>21</td>
</tr>
</tbody>
</table>
1.2发送ajax请求获取json数据创建datagrid
<table data-options="url:'${pageContext.request.contextPath}/json/datagrid-data.json'" class="easyui-datagrid">
<thead>
<tr>
<th data-options="field:'id'">编号</th>
<th data-options="field:'name'">姓名</th>
<th data-options="field:'age'">年龄</th>
</tr>
</thead>
</table>
json文件:
{"id":"001", "name":"小明" , "age":15 },
{"id":"002", "name":"小红" , "age":15 },
{"id":"003", "name":"小黄" , "age":15 }
1.3使用easyUI提供的API创建datagrid
<table id="myTable"></table>
<script type="text/javascript">
$(function(){
//页面加载完成后，创建数据表格datagrid
$("#myTable").datagrid({
//定义标题行所偶遇的列，即头行
columns:[[
{title:'编号',field:'id',checkbox:true},
{title:'姓名',field:'name'},
{title:'年龄',field:'age'},
{title:'地址',field:'address'}
]],
//指定数据表格发送ajax请求
url:'${pageContext.request.contextPath}/json/datagrid-data.json',
//行号
rownumbers:true,
//是否单选
singleSelect:true,
//定义工具栏
toolbar:[
{text:'添加',iconCls:'icon-add',
//为按钮绑定事件
handler:function(){
alert(1);
}
},
{text:'删除',iconCls:'icon-remove'},
{text:'修改',iconCls:'icon-edit'},
{text:'查询',iconCls:'icon-search'}
],
//显示分页栏,仅前台展示
pagination:true
});
})
</script>
1.4数据表格datagrid提供的方法，用于获取所有选中的行：getSelections
<table id="grid"></table>
// 取派员信息表格
$('#grid').datagrid( {
iconCls : 'icon-forward',
//自适应
fit : true,
border : false,
rownumbers : true,
striped : true,
//每页显示的页数
pageList: [30,50,100],
pagination : true,
toolbar : toolbar,
url : "staffAction_pageQuery.action",
idField : 'id',
columns : columns,
//绑定双击事件
onDblClickRow : doDblClickRow
});
// 定义列
var columns = [ [ {
field : 'id',
checkbox : true,
},{
field : 'name',
title : '姓名',
width : 120,
align : 'center'
}, {
field : 'telephone',
title : '手机号',
width : 120,
align : 'center'
}, {
field : 'haspda',
title : '是否有PDA',
width : 120,
align : 'center',
formatter : function(data,row, index){
if(data=="1"){
return "有";
}else{
return "无";
}
}
}, {
field : 'deltag',
title : '是否作废',
width : 120,
align : 'center',
formatter : function(data,row, index){
if(data=="0"){
return "正常使用"
}else{
return "已作废";
}
}
}, {
field : 'standard',
title : '取派标准',
width : 120,
align : 'center'
}, {
field : 'station',
title : '所谓单位',
width : 200,
align : 'center'
} ] ];
修改删除按钮绑定的事件：
function doDelete(){
//获取数据表格中所有选中的行，返回数组对象
var rows = $("#grid").datagrid("getSelections");
if(rows.length == 0){
//没有选中记录，弹出提示
$.messager.alert("提示信息","请选择需要删除的取派员！","warning");
}else{
//选中了取派员,弹出确认框
$.messager.confirm("删除确认","你确定要删除选中的取派员吗？",function(r){
if(r){
var array = new Array();
//确定,发送请求
//获取所有选中的取派员的id
for(var i=0;i<rows.length;i++){
var staff = rows[i];//json对象
var id = staff.id;
array.push(id);
}
var ids = array.join(",");//1,2,3,4,5
location.href = "staffAction_deleteBatch.action?ids="+ids;
}
});
}
}