Plugin - Easy UI - datagrid

 

获取数据

<table id="grid" style="width:400px;height:500px"> </table>
<script>
    $("#grid").datagrid({
        url: '/Students/Read',
        idField: 'Id',
        singleSelect: true,
        rownumbers: true,
        striped: true,
        pagination: true,
        columns: [[
            { field: 'Id', title: 'Id', width: 100 },
            { field: 'Name', title: 'Name', width: 100 }
        ]]
    })

 

添加自定义字段/编辑按钮

<table id="grid" style="width:400px;height:500px"> </table>
<script>
    $("#grid").datagrid({
        url: '/Students/Read',
        idField: 'Id',
        columns: [[
            { field: 'Id', title: 'Id', width: 100 },
            { field: 'Name', title: 'Name', width: 100 },
            {
                field: 'opt',
                title: '操作',
                width: 100,
                formatter: function (value, rec) {
                    var btn = '<a class="editcls" onclick="editRow(\'' + rec.Id + '\',\'' + rec.Name + '\')" href="javascript:void(0)">编辑</a>';
                    return btn;
                }
            }
        ]],
        //onLoadSuccess:function(data){  
        //    $('.editcls').linkbutton({text:'编辑',plain:true,iconCls:'icon-edit'});  
        //}
    })

 

---

前端分页

<table id="grid" style="width:400px;height:500px"></table>
<script>
    $("#grid").datagrid({
        url: '/Students/Read',
        idField: 'Id',
        pagination: true,
        columns: [[
            { field: 'Id', title: 'Id', width: 100 },
            { field: 'Name', title: 'Name', width: 100 },
    })

    $('#grid').datagrid({ loadFilter: pagerFilter }).datagrid('load');

    // 前端分页方法
    function pagerFilter(data) {
        if (typeof data.length == 'number' && typeof data.splice == 'function') {    // 判断数据是否是数组
            data = {
                total: data.length,
                rows: data
            }
        }
        var dg = $(this);
        var opts = dg.datagrid('options');
        var pager = dg.datagrid('getPager');
        pager.pagination({
            onSelectPage: function (pageNum, pageSize) {
                opts.pageNumber = pageNum;
                opts.pageSize = pageSize;
                pager.pagination('refresh', {
                    pageNumber: pageNum,
                    pageSize: pageSize
                });
                dg.datagrid('loadData', data);
            }
        });
        if (!data.originalRows) {
            data.originalRows = (data.rows);
        }
        var start = (opts.pageNumber - 1) * parseInt(opts.pageSize);
        var end = start + parseInt(opts.pageSize);
        data.rows = (data.originalRows.slice(start, end));
        return data;
    }
</script>

后端分页

<table id="grid" style="width:400px;height:500px"> </table>
<script>
    $("#grid").datagrid({
        url: '/Students/Read',
        idField: 'Id',
        singleSelect: true,
        rownumbers: true,
        striped: true,
        pagination: true,
        columns: [[
            { field: 'Id', title: 'Id', width: 100 },
            { field: 'Name', title: 'Name', width: 100 },
        ]],
    })
</script>

[HttpPost]
public ActionResult Read(int page, int rows)
{
    var entities = new List<Student>();
    for (var i = 0; i < 74; i++)
    {
        var entity = new Student()
        {
            Id = i,
            Name = "Student" + i.ToString()
        };
        entities.Add(entity);
    }
    var result = new { total = entities.Count, rows = entities.Skip((page - 1) * rows).Take(rows) };
    return Json(result);
}

 

---

 

返回选中行数据

单行

function () {
　　var row = data_grid.datagrid('getSelected');
　　if (row == null) {
    　　alert("您未选择任何数据!");
　　}
　　else {
    　　$.ajax({
        　　url: "/Administrator/GetData",
        　　dataType: "json",
        　　data: { dat: JSON.stringify(row) },
        　　type: "post",
        　　success:null,
    　　});
　　}
}

多行

// Jscript
function () {
　　var rows = data_grid.datagrid('getSelections');
　　if (rows.length == 0) {
    　　alert("您未选择任何数据!");
　　}
　　else {
    　　$.ajax({
        　　url: "/Administrator/GetData",
        　　dataType: "json",
        　　data: { dat: JSON.stringify(rows) },
        　　type: "post",
        　　success:null,
    　　});
　　}
}

// 后台
[HttpPost]
public ActionResult GetData(string dat)
{
    List<Administrator> admins = JsonConvert.DeserializeObject<List<Administrator>>(rows);

    return View();
}