easy-ui 小白进阶史(二):操作数据,easy-ui操作
easy-ui的操作及交互:
Html:
@using LangBo.Facade;
@using LangBo.DataDefine;
@using System.Threading.Tasks;
@model List<FR_CategoryInfo>
@{
ViewBag.Title = "小组管理";
Layout = "~/Views/Shared/_Layout.cshtml";
}
@section scripts {
<script src="@Url.Content("~/Scripts/Community/TopicMng.js")" type="text/javascript"></script>
}
<div id="main">
<div class="frame-top"> </div>
<div class="frame-list">
<table id="topiclist"></table> //加载数据
</div> </div> <div id="pop_Topic">
<div class="popinner">
<input type="hidden" name="Id" value="" />
<table class="frame-main">
<tr class="line">
<td class="title">小组类型</td>
<td class="content">
<select name="CategoryID" >
@foreach (FR_CategoryInfo category in Model)
{
<option value="@category.Id">@category.CategoryName</option>
}
</select>
</td>
<tr class="line">
<td class="title">小组名称</td>
<td class="content"><input name="TopicCont" value="" /></td>
</tr>
<tr class="line">
<td class="title">期数</td>
<td class="content"><input name="PeriodIndex" value="" /></td>
</tr>
<tr class="line">
<td class="title">小组排序</td>
<td class="content"><input name="TopicIndex" value="" /></td>
</tr>
<tr class="line">
<td class="title">权限</td>
<td class="content">
<select name="PurviewLevel" value="">
<option value="0">特权小组</option>
<option value="1">普通小组</option>
</select>
</td>
</tr>
</table>
<div class="actionbar-full">
//操作 与js中 InitPageEvent()相对应
<a href="javascript:void(0)" data-act="cancel" class="easyui-linkbutton" iconcls="icon-back">取消</a>
<a href="javascript:void(0)" data-act="save" class="easyui-linkbutton" iconcls="icon-ok">保存</a>
</div>
</div>
</div>
js:
$(document).ready(function () {
TopicMgr.InitPageEvent();
TopicMgr.InitPageCtrl();
TopicMgr.InitPageData();
});
var TopicMgr = {
InitPageEvent: function () {
$("#pop_Topic .actionbar-full a[data-act=save]").on("click", function () {
TopicMgr.SaveTopic();
});
$("#pop_Topic .actionbar-full a[data-act=cancel]").on("click", function () {
TopicMgr.CancelEditTopic();
});
},
InitPageCtrl: function () { //隐藏添加弹出框
$("#pop_Topic").dialog({ modal: true, closed: true });
},
InitPageData: function () {
$("#topiclist").datagrid({
url: "/Community/Topic/List",
title: "小组管理",
width: 980,
height: 760,
loadMsg: "加载中....",
fitColumns: false,
rownumbers: true,
singleSelect: true,
idField: "Id",
columns: [[
{ field: "Id", title: "ID", width: 50, align: "left" },
{ field: "CategoryName", title: "小组类别", width: 80, align: "left" },
{ field: "TestTypeName", title: "考试类型", width: 80, align: "left" },
{ field: "TopicCont", title: "小组名称", width: 90, align: "left" },
{ field: "TopicDesc", title: "简介", width: 150, align: "left" },
{ field: "PeriodIndex", title: "当前期数", width: 70, align: "left" },
{ field: "TopicIndex", title: "小组排序", width: 70, align: "left" },
{ field: "CreatorName", title: "创始人", width: 100, align: "left" },
{
field: "PurviewLevel", title: "权限", width: 80, align: "left",
formatter: function (value) {
return value == 0 ? "特权小组" : "普通小组"
}
},
{
field: "TimeMark", title: "创建时间", width: 110, align: "left",
formatter: function (value) {
return FormatJSONDateToDate(value);
}
},
//进行操作
{
field: "Op", title: "操作", width: 150, align: "left",
formatter: function (value, rec, rowIdx) {
return "<a href='javascript:TopicMgr.EditTopic()' style='margin-right: 10px'>编辑</a>" +
"<a href='javascript:TopicMgr.DeleteTopic(" + rowIdx + ")'>删除</a>";
}
},
]],
///添加
toolbar: [{
text: "添加",
iconCls: "icon-add",
handler: function () {
TopicMgr.AppendTopic();
}
}]
});
},
AppendTopic: function () {
$("#pop_Topic input[name=Id]").val("");
$("#pop_Topic input[name=CategoryID]").val("");
$("#pop_Topic input[name=TestType]").val("");
$("#pop_Topic input[name=TopicCont]").val("");
$("#pop_Topic input[name=CreatorID]").val("");
$("#pop_Topic textarea[name=TopicDesc]").text("");
$("#pop_Topic input[name=TimerMark]").val("");
$("#pop_Topic input[name=PurviewLevel]").val("");
$("#pop_Topic input[name=PeriodIndex]").val("");
$("#pop_Topic input[name=TopicIndex]").val("");
$("#pop_Topic").dialog({ title: "添加信息" });
$("#pop_Topic").dialog("open");
},
EditTopic: function () {
TryAutoFillControl($("#topiclist").datagrid("getSelected"), "pop_Topic");
$("#pop_Topic").dialog({ title: "编辑信息" });
$("#pop_Topic").dialog("open");
},
SaveTopic: function () {
var dataCarrier = new Object();
dataCarrier.topic = SerializeFormObjs($("#pop_Topic :input").serializeArray());
var postUrl;
if (dataCarrier.topic.Id == "")
postUrl = "/Community/Topic/Insert"; //添加
else postUrl = "/Community/Topic/Update"; //修改
$.ajax({
type: "POST",
url: postUrl,
data: JSON.stringify(dataCarrier),
dataType: "json",
contentType: "application/json;charset=utf-8",
success: function (result) {
$("#topiclist").datagrid("reload");
$("#pop_Topic").dialog("close");
$.messager.alert("提示", result, "info");
},
error: function (ex) {
$.messager.alert('提示', "操作失败", "error");
}
});
},
DeleteTopic: function (index) {
//操作删除 传参到C#
$.messager.confirm("提示", "你确定删除此条记录吗?", function (r) {
if (r) {
$.ajax({
type: "POST",
url: "/Community/Topic/Delete",
data: "{ 'topicID': '" + $("#topiclist").datagrid("getSelected").Id + "' }",
dataType: "json",
contentType: "application/json;charset=utf-8",
success: function (result) {
$("#topiclist").datagrid("deleteRow", index);
$.messager.alert("提示", result, "info");
},
error: function (ex) {
$.messager.alert('提示', "操作失败", "error");
}
});
}
});
},
//关闭弹出框
CancelEditTopic: function () {
$("#pop_Topic").dialog("close");
}
}
C#:
public async Task<ActionResult> TopicMng() {
if (CurrentUser.GetCurrentUserPurview(CurrentUser.UserPurview_Community)) {
List<FR_CategoryInfo> listCategory = await CommunityTopicFacade.ListCategory().ConfigureAwait(false);
return View(listCategory);
} else
return Redirect("~/Home/Error");
}
public async Task<JsonResult> List() {
return new JsonResult() {
Data = await CommunityTopicFacade.ListAsync().ConfigureAwait(false)
};
}
public async Task<JsonResult> Insert(FR_TopicInfo topic) {
topic.CreatorID = CurrentUser.GetCurrentUserID();
topic.PeriodIndex = 1;
await CommunityTopicFacade.InsertAsync(topic).ConfigureAwait(false);
return new JsonResult() {
Data = "添加数据成功"
};
}
public async Task<JsonResult> Update(FR_TopicInfo topic) {
topic.CreatorID = CurrentUser.GetCurrentUserID();
await CommunityTopicFacade.UpdateAsync(topic).ConfigureAwait(false);
return new JsonResult() {
Data = "修改数据成功"
};
}
public async Task<JsonResult> Delete(string topicID) {
await CommunityTopicFacade.DeleteAsync(topicID).ConfigureAwait(false);
return new JsonResult() {
Data = "删除数据成功"
};
}
easy-ui 小白进阶史(二):操作数据,easy-ui操作的更多相关文章
- easy-ui 小白进阶史(一):加载数据,easy-ui显示
作为一个没上过大学,没经过正规培训的96年的小白来说,找工作就没报特别大的希望,大不了找不到在回炉重造,继续学... 终于在海投了200份的简历之后...终于找到了...面试也挺简单的,,,第二天就去 ...
- TensorFlow进阶(二)---张量的操作
张量操作 在tensorflow中,有很多操作张量的函数,有生成张量.创建随机张量.张量类型与形状变换和张量的切片与运算 生成张量 固定值张量 tf.zeros(shape, dtype=tf.flo ...
- Android高手进阶教程(二十八)之---Android ViewPager控件的使用(基于ViewPager的横向相册)!!!
分类: Android高手进阶 Android基础教程 2012-09-14 18:10 29759人阅读 评论(35) 收藏 举报 android相册layoutobjectclassloade ...
- iOS进阶指南试读之UI篇
iOS进阶指南试读之UI篇 UI篇 UI是一个iOS开发工程师的基本功.怎么说?UI本质上就是你调用苹果提供给你的API来完成设计师的设计.所以,想提升UI的功力也很简单,没事就看看UIKit里的各个 ...
- css进阶之二:flex弹性布局
布局模式是指一个盒子与其兄弟.祖先盒的关系决定其尺寸与位置的算法.css2.1中定义了四种布局模式,分别是块布局.行内布局.表格布局.以及定位布局.css3引入了新的布局模式Flexbox布局,灵活度 ...
- Wireshark入门与进阶系列(二)
摘自http://blog.csdn.net/howeverpf/article/details/40743705 Wireshark入门与进阶系列(二) “君子生非异也,善假于物也”---荀子 本文 ...
- ”Metro UI之磁贴(二)
也来“玩”Metro UI之磁贴(二) 继昨天的“也来“玩”Metro UI之磁贴(一)”之后,还不过瘾,今天继续“玩”吧——今天把单选的功能加进来,还有磁贴的内容,还加了发光效果(CSS3,IE9+ ...
- Redis 小白指南(二)- 基础命令和五大类型:字符串、散列、列表、集合和有序集合
Redis 小白指南(二)- 基础命令和五大类型:字符串.散列.列表.集合和有序集合 引言 目录 基础命令 字符串类型 散列类型 列表类型 集合类型 有序集合类型 基础命令 1.获得符合规则的键名列表 ...
- SpringBoot进阶教程(二十九)整合Redis 发布订阅
SUBSCRIBE, UNSUBSCRIBE 和 PUBLISH 实现了 发布/订阅消息范例,发送者 (publishers) 不用编程就可以向特定的接受者发送消息 (subscribers). Ra ...
随机推荐
- freeCodeCamp:Chunky Monkey
猴子吃香蕉可是掰成好几段来吃哦! 把一个数组arr按照指定的数组大小size分割成若干个数组块. 例如:chunk([1,2,3,4],2)=[[1,2],[3,4]]; chunk([1,2,3,4 ...
- .Net 对App.config和Web.config的访问操作(增、删、读、改)
一.首先引用Configuration 1)App.config如下: using System.Configuration;//若果还没有Configuration,右键引用文件夹添加引用,在.NE ...
- oracle flashback功能
2). 检查Flashback 功能, 缺省时功能是关闭的. SQL> select name, current_scn, flashback_on from v$database; NAME ...
- XML解析、使用TreeView呈现效果
首先用到TXMLDocument控件: Memo来显示XML文件, TreeView来呈现元素: 源代码: Procedure TForm2.Button1Click(Sender: TObject) ...
- HttpWebRequest 请求数据
string fullUrl = "http://vip.AAA.cn/PreviewInterfaceAction.action?code=vip0008&data_digest= ...
- js 正则表达式
//判断字符串是否为数字 function checkRate(input) { var re = /^[0-9]+.?[0-9]*$/; if (!re.test(input.rate.value) ...
- win使用MSYS2安装Qt开发环境
原文链接 MSYS2 下载地址: pacman的具体用法 有pacman的具体使用方法.我们首先对系统升级 我们首先对系统升级 pacman -Syu 就会检测整个系统可以升级的组件,并自动下载安装, ...
- 纯css实现模块阴影变色效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Nessus导入Cookie进行Web应用安全扫描
在不导入Cookie使用Nessus进行扫描的时候,扫描的结果是比较简单的,很多深层的问题无法被扫描出来. 需要我们手动导入Cookie,带着Cookie的状态扫描的结果会更详细更深入,以下是操作步骤 ...
- 数学工具WZgrapher
之前说了mathGV,其实还有一个不错类似软件WZgrapher,不仅可以画函数图,还可以微积分. 截图如下: