cshtml:
View Code
@model IEnumerable<MvcProjTpl.Entity.DeptEntity>
@{ViewBag.Title = "jTemplateTest";}
<h2>jTemplateTest</h2>
<script src="@Url.Content("~/Scripts/jquery-jtemplates.js")" type="text/javascript"></script>
<script type="text/javascript">
/*
[
{ "DeptId": "dept_id_0000000", "DeptName": "dept_name_0000000", "ParentDept": "-1", "UpdateUser": "uuu", "UpdateTime": "\/Date(1332691200000)\/", "ValidCode": 1 },
{ "DeptId": "dept_id_0000001", "DeptName": "dept_name_0000001", "ParentDept": "-1", "UpdateUser": "user_0000001", "UpdateTime": "\/Date(1332434783000)\/", "ValidCode": 1 },
{ "DeptId": "dept_id_0000010", "DeptName": "dept_name_0000010", "ParentDept": "-1", "UpdateUser": "user_0000005", "UpdateTime": "\/Date(1332434783000)\/", "ValidCode": 1 },
{ "DeptId": "dept_id_0000011", "DeptName": "dept_name_0000011", "ParentDept": "-1", "UpdateUser": "user_0000005", "UpdateTime": "\/Date(1332434783887)\/", "ValidCode": 1 },
{ "DeptId": "dept_id_0000012", "DeptName": "dept_name_0000012", "ParentDept": "-1", "UpdateUser": "user_0000005", "UpdateTime": "\/Date(1332434783887)\/", "ValidCode": 1 },
{ "DeptId": "dept_id_0000013", "DeptName": "dept_name_0000013", "ParentDept": "-1", "UpdateUser": "user_0000005", "UpdateTime": "\/Date(1332434783887)\/", "ValidCode": 1 },
{ "DeptId": "dept_id_0000015", "DeptName": "dept_name_0000015xx", "ParentDept": "-1", "UpdateUser": "user_0000001", "UpdateTime": "\/Date(1332434783000)\/", "ValidCode": 1 },
{ "DeptId": "dept_id_0000016", "DeptName": "dept_name_0000016", "ParentDept": "-1", "UpdateUser": "user_0000001", "UpdateTime": "\/Date(1332434783887)\/", "ValidCode": 1 },
{ "DeptId": "dept_id_0000017", "DeptName": "dept_name_0000017", "ParentDept": "-1", "UpdateUser": "user_0000001", "UpdateTime": "\/Date(1332434783887)\/", "ValidCode": 1 },
{ "DeptId": "dept_id_0000018", "DeptName": "dept_name_0000018", "ParentDept": "-1", "UpdateUser": "user_0000001", "UpdateTime": "\/Date(1332434783887)\/", "ValidCode": 1 }
]
*/
$(document).ready(function () {
$.getJSON('@Url.Action("GetJsonData", "AjaxDept")', function (data) {
//setup templates
$("#listContainer").setTemplateElement("listTemplate").processTemplate(data);
//$("#itemList").processTemplate(null); //process empty data to show header
});
});
</script>
<!-- Output elements -->
<div id="listContainer"></div>
<!-- Templates -->
<textarea id="listTemplate" rows="0" cols="0" style="display:none;">
<table class="gvMain">
<tr class="gvMainHeader">
<th>DeptId</th>
<th>DeptName</th>
<th>ParentDept</th>
<th>UpdateUser</th>
<th>UpdateTime</th>
<th>ValidCode</th>
</tr>
{#foreach $T as item}
<tr class="{#cycle values=['gvMainRow','gvMainAlternatingRow']}">
<td>{$T.item.DeptId.bold()}</td>
<td><a name="lnkView" dataId="{$T.item.DeptId}" href="@Url.Action("Details", "AjaxDept")/{$T.item.DeptId}">{$T.item.DeptName}</a></td>
<td>{$T.item.ParentDept}</td>
<td>{$T.item.UpdateUser}</td>
<td>{$T.item.UpdateTime}</td>
<td>{$T.item.ValidCode}</td>
</tr>
{#/for}
</table>
</textarea>
<div id="dialogArea" title="部门信息" style=" text-align:center; vertical-align:middle;"></div>
<script type="text/javascript">
$(function () {
window.dialog = $("#dialogArea").dialog({ autoOpen: false });
$("#btnAdd").click(function () {
var url = '@Url.Content("~/AjaxDept/Create")';
showDialog(url, "dialogArea");
});
$("input[name='btnEdit']").each(function () {
$(this).click(function () {
var url = '@Url.Content("~/AjaxDept/Editxxx")' + $(this).attr("dataId");
showDialog(url, "dialogArea");
});
});
$("input[name='btnDel']").each(function () {
$(this).click(function () {
var url = '@Url.Content("~/AjaxDept/Delete")' + $(this).attr("dataId");
showDialog(url, "dialogArea");
});
});
$("a[name='lnkView']").each(function () {
$(this).click(function () {
var url = '@Url.Content("~/AjaxDept/Details")' + $(this).attr("dataId");
showDialog(url, "dialogArea");
return false;
});
});
});
function showDialog(url, dialogElementId, dialogWidth, dialogHeight) {
var objOption = { height: 360, 750, autoOpen: false, modal: true };
if (dialogWidth) objOption.width = dialogWidth;
if (dialogHeight) objOption.height = dialogHeight;
var dialogElement = $("#" + dialogElementId);
//window.dialog.dialog("destroy");
window.dialog = dialogElement.dialog(objOption);
dialogElement.html('<img src="@Url.Content("~/Content/images/ico/loading.gif")" alt="" /> Loading dialog data...');
window.dialog.dialog("open");
//alert("Check Loading");
dialogElement.load(url + '?timestamp=' + Math.random());
}
</script>
Controller:
View Code
public ActionResult jTemplateTest()
{
return View();
}
//public JsonResult jTemplateTest(int page = 1, int pageSize = 10, string sortName = "dept_name", string sortOrder = "asc")
//{
// string whereClause = "";
// string orderBy = string.Format("{0} {1}", sortName, sortOrder);
// int totalRowsCount = 0;
// IList<DeptEntity> list = bll.GetPagedList(out totalRowsCount, whereClause, orderBy, page, pageSize);
// ViewBag.PagerInfo = new PagerInfo("~/AjaxDept/jTemplateTest", page, pageSize, totalRowsCount);
// return Json(list, JsonRequestBehavior.AllowGet);
//}
public JsonResult GetJsonData(int page = 1, int pageSize = 10, string sortName = "dept_name", string sortOrder = "asc")
{
string whereClause = "";
string orderBy = string.Format("{0} {1}", sortName, sortOrder);
int totalRowsCount = 0;
IList<DeptEntity> list = bll.GetPagedList(out totalRowsCount, whereClause, orderBy, page, pageSize);
ViewBag.PagerInfo = new PagerInfo("~/AjaxDept/jTemplateTest", page, pageSize, totalRowsCount);
return Json(list, JsonRequestBehavior.AllowGet);
}