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学习记录(五)的更多相关文章

  1. JQuery EasyUI学习记录(三)

    1.jQuery EasyUI messager使用方式 1.1 alert方法 $(function(){ //1.alert方法---提示框 $.messager.alert("标题&q ...

  2. JQuery EasyUI学习记录(二)

    1.jquery easyUI动态添加选项卡(查看jquery easyUI手册) 1.1 用于动态添加一个选项卡 1.1.1 选中指定的选项卡和判断某个选项卡是否存在 测试代码: <a id= ...

  3. JQuery EasyUI学习记录(一)

    1.主页设计(JQuery EasyUI插件) 下载easyUI开发包: 将easyUI资源文件导入页面中: <link rel="stylesheet" type=&quo ...

  4. JQuery EasyUI学习记录(四)

    1.EasyUI中的validatebox使用 提供的校验规则: 1.非空校验required="required" 2.使用validType指定 email: 正则表达式匹配电 ...

  5. jQuery EasyUI学习资源汇总

    jQuery EasyUI学习资源汇总 EasyUi – 1.入门 EasyUi – 2.布局Layout + 3.登录界面 EasyUi – 4.datwagrid 学习Jquery EasyUI的 ...

  6. JQuery EasyUI学习框架

    前言 前端技术,新项目的开发拟使用EasyUI框架(基于EasyUI丰富UI组件库),项目负责人的提示EasyUI分配给我这个任务.发展前,我需要这对于一个新手EasyUI框架学习一些基本的入门.记录 ...

  7. JQuery EasyUI学习笔记

    转载请注明原文地址:http://www.cnblogs.com/ygj0930/p/6690888.html  简介与准备 jQuery EasyUI 是一个基于 jQuery 的框架,集成了各种用 ...

  8. jQuery EasyUI学习二

    1.   课程介绍 1.  Datagrid组件(掌握) 2.  Dialog.form组件(掌握) 3. Layout.Tabs;(掌握) Datagrid组件 2.1.  部署运行pss启动无错 ...

  9. EasyUI学习总结(五)——EasyUI组件使用

    一.EasyUI组件的简单介绍 easyUI提供了很多组件让我们使用,如下图所示:

随机推荐

  1. unity update优化

    http://forum.china.unity3d.com/thread-13968-1-1.html Unity有个消息系统,它可以在运行中当发生指定事件时调用你在脚本中定义的那些魔术方法.这是个 ...

  2. 洛谷P3080 [USACO13MAR]牛跑The Cow Run

    P3080 [USACO13MAR]牛跑The Cow Run 题目描述 Farmer John has forgotten to repair a hole in the fence on his ...

  3. 剑指Offer的学习笔记(C#篇)-- 合并两个排序的链表

    题目描述 输入两个单调递增的链表,输出两个链表合成后的链表,当然我们需要合成后的链表满足单调不减规则. 一 . 题目分析 根据题意,可得出,该题目要求两个单增的链表合成一条单增的链表. 链表一:1→5 ...

  4. SublimeText3 snippet 编写总结

    SublimeText3 snippet 编写总结 SublimeText的snippet定义功能也十分强大, 类似VAssist. 在菜单tool->New Snippet中定义.  打开后显 ...

  5. JMeter(6) jenkins测试报告及邮件优化

    jenkins邮件 使用jenkins执行完任务自动将测试结果发送到邮箱,效果如下:     生成html报告 build文件设置     jenkins设置 SummaryReport写入邮件正文 ...

  6. Python web前端 10 bootstrp

    Python web前端 10 bootstrp 1.媒体查询 <style> *{ margin: 0; padding: 0; } div{ width: 110px; height: ...

  7. 【NOI2014】起床困难综合症 贪心

    从高到低按位贪心,讨论一下初始0或1,分别暴力算出结果是什么 如果一开始0就能得1当然直接ans垒起来 如果1能得1而且当前m够用,那也垒起来,同时m减掉 否则gg 2min的代码 #include ...

  8. PHP EXCEL相关

    这次的需求是在二次扫描的EXCEL报表中加入一列扫描时间. 扫描的时间之前已经写进日志里了,这次要做的就是把时间读取出来然后作为一列插入报表.其实日志也已经读出来了,要做的就是插入.但插入还是碰到不少 ...

  9. VS Code开发调试.NET Core 2.0

    VS Code开发调试.NET Core 2.0 使用VS Code 从零开始开发调试.NET Core 2.0.无需安装VS 2017 15.3+即可开发调试.NET Core 2.0应用. VS ...

  10. 067 Add Binary 二进制求和

    给定两个二进制字符串,返回他们的和(用二进制表示).案例:a = "11"b = "1"返回 "100" .详见:https://leetc ...