首页 > 代码库 > 获取datagrid选中行的数据,显示到window窗口中

获取datagrid选中行的数据,显示到window窗口中

(在上次随笔代码的基础上)

1.datagrid代码:

<div style="width:100%;height:100%;">
    <table class="easyui-datagrid" id="datagridUser" style="width: 100%; height: 95%;" data-options="singleSelect:true,url:‘@Url.Action("GetList")‘,method:‘get‘,toolbar:toolbar" pagination="true" sortname="Id" sortorder="asc">
        <thead>
            <tr>
                <th style="width:10%" data-options="field:‘Id‘" sortable="true">编号</th>
                <th style="width:15%" data-options="field:‘Name‘" sortable="true">登录名</th>
                <th style="width:15%" data-options="field:‘RealName‘" sortable="true">姓名</th>
                <th style="width:15%" data-options="field:‘Sex‘" sortable="true">性别</th>
                <th style="width:15%" data-options="field:‘Email‘">邮箱</th>
                <th style="width:15%" data-options="field:‘Phone‘">电话</th>
                <th style="width:15%" data-options="field:‘Address‘">地址</th>
            </tr>
        </thead>
    </table>
</div>

2.JS代码

<script type="text/javascript">
    var toolbar =  [{
        text: ‘删除用户‘,
        iconCls: ‘icon-clear‘,
        handler: function () {
            var row = $("#datagridUser").datagrid("getSelected");
            if (row != null) {               
                var userId = row.Id;
                //执行删除操作
                if (confirm("确认删除吗?"))
                {
                    $.ajax({
                        type: "POST",
                        url: "/UserManager/DeleteUser",
                        data: "id=" + userId,
                        success: function (result) {
                            if (result == "true") {
                                $("#datagridUser").datagrid("reload");
                            }
                        }
                    });
                }                        
            }
            else {
                alert("请选择要删除的项!");
            }
        }
    }, {
        text: ‘查看详情‘,
        iconCls: ‘icon-search‘,
        handler: function () {
            var row = $("#datagridUser").datagrid("getSelected");
            if (row != null) {
                //绑定窗体数据
                var userId = row.Id;
                //执行查询操作
                $.ajax({
                    type: "get",
                    url: "/UserManager/GetUser",
                    data: "id=" + userId,
                    success: function (jsonUserInfo) {
                        var json = JSON.parse(jsonUserInfo);
                        $("#textInfoName").val(json.Name);
                        $("#textInfoRealName").val(json.RealName);
                        $("#textInfoSex").val(json.Sex);
                        $("#textInfoEmail").val(json.Email);
                        $("#textInfoPhone").val(json.Phone);
                        $("#textInfoAddress").val(json.Address);                      
                      
                        //打开窗口,居中显示
                        $(‘#windowUserInfo‘).window({
                            top: ($(window).height() - 300) * 0.5,
                            left: ($(window).width() - 500) * 0.5,
                        }).window(‘open‘);
                    }
                });
            }
            else {
                alert("请选择用户!");
            }
        }
    }];
</script>

注:var row = $("#datagridUser").datagrid("getSelected")获取选中行;var userId = row.Id 获取该行数据的ID; url: "/UserManager/GetUser" ajax调用action获取数据;我的action传回的是json字符串;$("#textInfoName").val(json.Name)  绑定显示数据

3.control

        [HttpPost]
        public ActionResult DeleteUser(int id)
        {           
            var user = userService.Get(x => x.Id == id);   //获取要删除的User
            if (userService.Delete(user))
            {
                return Content("true");
            }
            else
            {
                return Content("false");
            }
        }

    [HttpGet]
        public string GetUser(int id)
        {
            var user = userService.Get(x => x.Id == id);   //获取要删除的User           
            var json = JsonConvert.SerializeObject(user);
            return json;
        }

注:代码只有部分,备忘方便以后查看

获取datagrid选中行的数据,显示到window窗口中