easyui-datagrid的detailview扩展动态显示行数据详细内容(C#MVC)

最新推荐文章于 2023-04-17 18:41:03 发布

djk8888

最新推荐文章于 2023-04-17 18:41:03 发布

阅读量1k

点赞数 1

分类专栏： html jquery JS代码文章标签： easyui-datagrid detailview onExpandRow

本文链接：https://blog.csdn.net/djk8888/article/details/78341090

版权

html 同时被 3 个专栏收录

97 篇文章 1 订阅

订阅专栏

JS代码

76 篇文章 1 订阅

订阅专栏

jquery

44 篇文章 0 订阅

订阅专栏

引用脚本：

<script type="text/javascript" src="http://www.w3cschool.cc/try/jeasyui/datagrid-detailview.js"></script>

HTML：

<table id="ClassInfo_DataGrid" class="easyui-datagrid">
        <thead>
            	<tr>
			<th field="ClassId" width="60">班级ID</th>
			<th field="Classname" width="80">班级名称</th>
			<th field="SubjectName" align="right" width="70">科目</th>
			<th field="CampusName" align="right" width="70">校区</th>
			<th field="BeginDate" width="50" align="center">开课日期</th>
 		</tr>
 	</thead>
</table>

JavaScript:

function initTable(queryData, classid) {
    $("#ClassInfo_DataGrid").datagrid({
        url: '/Teaching/ClassInfo/GetAllClassInfo',
        nowrap: true,
        striped: true,
        sortOrder: 'asc',
        remoteSort: false,
        idField: 'ClassId',
        queryParams: queryData,
        pageSize: 50,
        pageList: [50, 100, 200],
        view: detailview,
        detailFormatter: function (index, row) {
            return '<div class="ddv" style="padding:5px 0"></div>';
        },
        onExpandRow: function (index, row) {
            //alert(row.ClassId);
            var ddv = $(this).datagrid('getRowDetail', index).find('div.ddv');
            ddv.panel({
                border: false,
                cache: false,
                href: '/Teaching/ClassInfo/GetDetail?classid=' + row.ClassId,
                onLoad: function () {
                    $('#ClassInfo_DataGrid').datagrid('fixDetailRowHeight', index);
                }
            });
            $('#ClassInfo_DataGrid').datagrid('fixDetailRowHeight', index);
        }
    });
}

AJAX:

public class ClassInfoController : BaseController
{
     	public ActionResult GetDetail()
        {
            var classId = Request["classid"];
            ClassInfo data = ClassInfoBLL.ClassInfosFirstOrDefault(classId);
            ViewBag.ClassInfo = data;
            return View();
   	}
}

MVC-View:

@if (ViewBag.ClassInfo != null)
{
    <table class="dv-table" border="0">
        <tr>
            <td><b>班级系统名称:</b> @ViewBag.ClassInfo.ClassName   </td>
            <td><b>年级:</b> @ViewBag.ClassInfo.Grade.GradeName   </td>
            <td><b>班级种类:</b> @ViewBag.ClassInfo.CourseCategory.CourseCategoryName   </td>
            <td><b>班级类型:</b> @ViewBag.ClassInfo.CourseType.CourseTypeName   </td>
            <td><b>班级状态:</b> @ViewBag.ClassInfo.ClassStatus.ClassStatusName   </td>
            <td><b>老系统班级ID:</b> @ViewBag.ClassInfo.OldDbClassID   </td>
            <td><b>课程名称:</b> @ViewBag.ClassInfo.CoursePlans.CourseName   </td>
            <td><b>网站更新:</b> @if (ViewBag.ClassInfo.IsUpdate){<span>是</span>}else{<span>否</span>}  </td>
            <td><b>原班级ID:</b> @if (ViewBag.ClassInfo.OriginalClassID != "0"){@ViewBag.ClassInfo.OriginalClassID;}  </td>
            <td><b>班级介绍:</b> @ViewBag.ClassInfo.ClassIntroduction   </td>
        </tr>
    </table>
}