easyUI框架之学习3--表格datagrid
@model MVCEasyUI.Models.Sale.PageResult<MVCEasyUI.Models.Sale.Order>
@{
ViewBag.Title = "AddSaleOrder";
}
<!DOCTYPE html>
<html>
<head >
<link href="~/Scripts/easyUI/themes/default/easyui.css" rel="stylesheet" />
<link href="~/Scripts/easyUI/themes/icon.css" rel="stylesheet" />
<script src="~/Scripts/easyUI/jquery-1.7.2.min.js"></script>
<script src="~/Scripts/easyUI/jquery.easyui.min.js"></script>
<script src="~/Scripts/easyUI/locale/easyui-lang-zh_CN.js"></script>
<script >
var _id = 1;
$(function () {
});
function AppendRow() {
_id++;
var objId = 'tmp_' + _id;
var tmp = "<div id=" + objId + "><a href='#' class='easyui-linkbutton' data-options='iconCls:\"icon-remove\"' >删除</a> <a href='#' class='easyui-linkbutton' data-options='iconCls:\"icon-edit\"' >编辑</a></div>";
$('#OrderList').datagrid('appendRow', {
CorId: 0,
PlatfromId: 1,
ShopId: 2,
Opr:tmp
});
var obj = $("#" + objId);
$.parser.parse(obj);
}
function DeleteRow() {
var row = $('#OrderList').datagrid('getSelected');
alert(row);
if (row) {
var index = $('#OrderList').datagrid('getRowIndex', row);
$('#OrderList').datagrid('deleteRow', index);
}
}
</script>
</head>
<body >
<h2>@Model.ResultName</h2>
<a href="#" onclick ="AppendRow()">添加一行</a>
<table id="OrderList" class="easyui-datagrid">
<thead >
<tr >
<th data-options="field:'CorId'">商家ID</th>
<th data-options="field:'PlatfromId'">平台ID</th>
<th data-options="field:'ShopId'">店铺ID</th>
<th data-options="field:'TreadId'">交易编号</th>
<th data-options="field:'TreadTime'">交易时间</th>
<th data-options="field:'Opr'">操作</th>
</tr>
</thead>
<tbody >
@foreach (var order in Model.ResultList)
{
<tr id="Id@{@order.Id}">
<td id="CorId_@order.CorId">@order.CorId </td>
<td><a id="PlatfromId_@order.PlatfromId" href ="#">@order.PlatfromId </a></td>
<td><a id="ShopId_@order.ShopId" href ="#">@order.ShopId</a> </td>
<td>@order.TreadId </td>
<td>@order.TreadTime </td>
<td> <a href="javascript:;" class="easyui-linkbutton" data-options="iconCls:'icon-remove'" onclick='DeleteRow()'>删除</a>
<a href="javascript:;" class="easyui-linkbutton" data-options="iconCls:'icon-edit'" onclick=''>编辑</a>
</td>
</tr>
}
</tbody>
</table>
</body>
</html>
easyUI框架之学习3--表格datagrid的更多相关文章
- easyUI框架之学习1--框架
<!DOCTYPE html><html> <head > <link href="~/Scripts/easyUI/themes/default/ ...
- easyUI框架之学习2--添加左侧导航栏
<head> function addTab(title, url) { if ($('#tableContainer').tabs('exists', title)) { $('#tab ...
- easyUI框架之学习记录汇总
在添加完之后,可以使用 $.parser.parse();这个方法进行处理:(1) 对整个页面重新渲染: $.parser.parse(); (2) 渲染某个特定的objectvar targetOb ...
- easyui框架--基础篇（一）-->数据表格datagrid（php与mysql交互）
前 言 php easyui框架--本篇学习主要是 easyui中的datagrid(数据表格)框架. 本篇学习主要通过讲解一段代码加GIF图片学习datagrid(数据表格)中的一些常用属 ...
- 基于asp.net + easyui框架，一步步学习easyui-datagrid——实现分页和搜索（二）
http://blog.csdn.net/jiuqiyuliang/article/details/19967031 目录: 基于asp.net + easyui框架,一步步学习easyui-data ...
- EasyUI表格DataGrid前端分页和后端分页的总结
Demo简介 Demo使用Java.Servlet为后台代码(数据库已添加数据),前端使用EasyUI框架,后台直接返回JSON数据给页面 1.配置Web.xml文件 <?xml version ...
- [转载]EasyUI中数据表格DataGrid添加排序功能
我们这里演示的是EasyUI数据表格DataGrid从服务器端排序功能,因为觉的本地数据排序没有多大的作用,一般我们DataGrid不会读取全部数据,只会读取当前页的数据,所以本地数据排序也只是对当前 ...
- JQuery EasyUI框架学习
前言 新项目的开发前端技术打算採用EasyUI框架(基于EasyUI较为丰富的UI组件库),项目组长将前端EasyUI这块的任务分配给了我.在进行开发之前,须要我这菜鸟对EasyUI框架进行一些基础的 ...
- easyUI 数据表格datagrid的使用
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
随机推荐
- sp_executesql介绍和使用
原文:http://www.cnblogs.com/wanyuan8/archive/2011/11/09/2243483.html execute相信大家都用的用熟了,简写为exec,除了用来执行存 ...
- 【快报】基于K2 BPM的新一代协同办公门户实践交流会
2014年2月28日,“基于BPM的新一代协同办公门户”用户实践交流活动在深圳金茂JW万豪酒店3楼Meet Room IV举办.本次会议由K2携手微软共同举办,邀请到的参会企业都是K2 的BPM老客户 ...
- oracle系统包—-dbms_output用法
dbms_output包主要用于调试pl/sql程序,或者在sql*plus命令中显示信息(displaying message)和报表,譬如我们可以写一个简单的匿名pl/sql程序块,而该块出于某种 ...
- Oracle PL/SQL中如何使用%TYPE和%ROWTYPE
1. 使用%TYPE 在许多情况下,PL/SQL变量可以用来存储在数据库表中的数据.在这种情况下,变量应该拥有与表列相同的类型.例如,students表的first_name列的类型为VARCHAR2 ...
- Jquery跨域获得Json
这两天用 Jquery 跨域取数据的时候,经常碰到 invalid label 这个错误,十分的郁闷,老是取不到服务器端发送回来的 json 值, 一般跨域用到的两个方法为:$.ajax 和$.get ...
- 学习Shell脚本编程（第2期）_编写修改权限及执行Shell程序的步骤
编写Shell程序 执行Shell程序 Shell程序有很多类似C语言和其他程序设计语言的特征,但是又没有程序语言那样复杂.Shell程序是指放在一个文件中的一系列Linux命令和实用程序.在执行的时 ...
- Git差异比对
一. 查看变更还未载入(changed but unstaged,当前没有add 的内容)的文件比对: 只需运行不带任何参数的'git diff'命令即可 二. 查看载入(stage,即已经add)而 ...
- Google Map API key 获取方法
要想使用google map api 必须从google网站上获取key之后才有权限使用,但是要想申请key必须要有证明书,也就是所谓的MD5.下面一步一步来说明: 步骤1: 如果你使用的是eclip ...
- 8.HBase In Action 第一章-HBase简介（1.2.2 捕获增量数据）
Data often trickles in and is added to an existing data store for further usage, such as analytics, ...
- js对象的两种写法
<script> //定义一个对象,提供对应的方法或者属性 var s = { sd1: function () { }, sd2: fun ...