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 = "删除数据成功"

};

}