JQuery EasyUI学习记录(五)
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;
}
});
}
}
1.1 使用easyUI提供的API创建datagrid(掌握)
JQuery EasyUI学习记录(五)的更多相关文章
- JQuery EasyUI学习记录(三)
1.jQuery EasyUI messager使用方式 1.1 alert方法 $(function(){ //1.alert方法---提示框 $.messager.alert("标题&q ...
- JQuery EasyUI学习记录(二)
1.jquery easyUI动态添加选项卡(查看jquery easyUI手册) 1.1 用于动态添加一个选项卡 1.1.1 选中指定的选项卡和判断某个选项卡是否存在 测试代码: <a id= ...
- JQuery EasyUI学习记录(一)
1.主页设计(JQuery EasyUI插件) 下载easyUI开发包: 将easyUI资源文件导入页面中: <link rel="stylesheet" type=&quo ...
- JQuery EasyUI学习记录(四)
1.EasyUI中的validatebox使用 提供的校验规则: 1.非空校验required="required" 2.使用validType指定 email: 正则表达式匹配电 ...
- jQuery EasyUI学习资源汇总
jQuery EasyUI学习资源汇总 EasyUi – 1.入门 EasyUi – 2.布局Layout + 3.登录界面 EasyUi – 4.datwagrid 学习Jquery EasyUI的 ...
- JQuery EasyUI学习框架
前言 前端技术,新项目的开发拟使用EasyUI框架(基于EasyUI丰富UI组件库),项目负责人的提示EasyUI分配给我这个任务.发展前,我需要这对于一个新手EasyUI框架学习一些基本的入门.记录 ...
- JQuery EasyUI学习笔记
转载请注明原文地址:http://www.cnblogs.com/ygj0930/p/6690888.html 简介与准备 jQuery EasyUI 是一个基于 jQuery 的框架,集成了各种用 ...
- jQuery EasyUI学习二
1. 课程介绍 1. Datagrid组件(掌握) 2. Dialog.form组件(掌握) 3. Layout.Tabs;(掌握) Datagrid组件 2.1. 部署运行pss启动无错 ...
- EasyUI学习总结(五)——EasyUI组件使用
一.EasyUI组件的简单介绍 easyUI提供了很多组件让我们使用,如下图所示:
随机推荐
- luogu P5358 [SDOI2019]快速查询【模拟(?)】
把有单点修改和查询的点离散进一个数组,然后单点修改直接改,记录一个修改时间t,维护一个sm表示这些离散的点的和,val表示出了离散点其他点的值,因为都是一样的所以只记录这一个值即可,记录ljlc为加法 ...
- 洛谷P3431 [POI2005]AUT-The Bus
P3431 [POI2005]AUT-The Bus 题目描述 The streets of Byte City form a regular, chessboardlike network - th ...
- c#之quartz任务调度的使用
这里讲下,quartz这种任务调度程序的简单使用 这是使用的quartz的3.x 版本 2.x 版本与此稍有区别,可以在网上查看2.x版本教程 使用语言为c# quartz的使用分为几个步骤 创建一个 ...
- Linux上传下载工具 lrzsz
- docker镜像创建
1. 首选要创建一个Dockerfile文件,内容如下: FROM alpine:latest MAINTAINER lobin <lobin.hotmail.com> RUN apk ...
- Django中间件的执行流程
Django中间件的执行流程. 请求到达中间件之后,先按照正序执行每个注册中间件的process_reques方法,process_request方法返回的值是None,就依次执行, 如果返回的值是H ...
- (转)Inode详解
Inode详解 原文:http://www.cnblogs.com/adforce//p/3522433.html 一.inode是什么 理解inode,要从文件储存说起. 文件储存在硬盘上,硬盘的 ...
- linux网卡软中断shell脚本
LANG=C;export LANG; service irqbalance stop >/dev/null 2>&1;chkconfig irqbalance off; bon ...
- 在MVC中使用dotless后台动态解析LESSCSS的学习笔记
通过学习LessCSS,我们知道,Less是需要通过编译才能生成 .css 文件,主要使用三种方式进行编译: 1)使用第三方编译工具,在项目发布前编译好放在项目中. 2)在浏览器端解析执行,需要引用 ...
- P3290 寻找第K大数
描述 寻找第K大数 N个小朋友在一起做游戏.每个小朋友在自己的硬纸板上写一个数,然后同时举起来.接着,小y老师提一个问题,看哪个小朋友先抢答出来.问题是:在这N个数中,第K大的是哪个数?请你编程完成. ...