新手学EasyUI(七)----DataGrid CheckBox 动态选中

简介: <div class="markdown_views"><p>先上一张图:</p><p><img src="http://img.blog.csdn.net/20151110213959602" alt="这里写图片描述" title=""></p><p>下面说一下具体实现的功能是什么样的。</p><p>页面首次加载的时候,右面的表格中的CheckBox都处于未选

先上一张图:

这里写图片描述

下面说一下具体实现的功能是什么样的。

页面首次加载的时候,右面的表格中的CheckBox都处于未选中的状态,现在是这么设计的,时段只有这么8条数据在一张单独的表里面。

用户和时段的关系放在另一张表中,当点击左侧具体的用户的时候,根据表中的关系,勾选右侧DataGrid中与之对应的数据。这就是要实现的功能。

具体的实现如下:

根据选中的用户ID去表中查询与之对应的时段数据,然后当数据返回到前台之后,先将json串转换成json对象,然后循环遍历对象中的数据,将表格中对应的数据选中,代码如下:

 $.ajax({
                    type: 'POST',
                    url: 'CheckManager.ashx?action=GetUserPeriodByUserId' + '&user_id=' + user_id,
                    success: function (data) {
                        //转换
                        var result = JSON.parse(data);
                        var rowData = result.rows;
                        //循环遍历
                        $.each(rowData, function (idx, val) {
                            if (val.period_id) {
                                //选中
                                $('#dgTimeEdit').datagrid('selectRow', val.period_id-1);
                            }
                        });
                    }
                });   

需要注意的一个地方就是,表格的行数是从0开始的。效果图如下:

这里写图片描述

相关文章
|
2月前
EasyUI datagrid 从左至右递归合并表格
EasyUI datagrid 从左至右递归合并表格
15 2
|
2月前
EasyUI DataGrid 假分页
EasyUI DataGrid 假分页
15 0
|
15天前
|
JavaScript 前端开发
EasyUi js 加载数据表格DataGrid
EasyUi js 加载数据表格DataGrid
|
2月前
|
前端开发
easyui datagrid 的 tip实现
easyui datagrid 的 tip实现
|
2月前
|
JSON 监控 数据格式
Easy UI datagrid的学习
Easy UI datagrid的学习
|
5月前
Easyui datagrid 编辑结束时combobox显示value而不显示text
Easyui datagrid 编辑结束时combobox显示value而不显示text
|
5月前
EasyUI中datagrid的行编辑模式中,找到特定的Editor,并为其添加事件
EasyUI中datagrid的行编辑模式中,找到特定的Editor,并为其添加事件
|
5月前
EasyUI DataGrid 可编辑列级联操作
EasyUI DataGrid 可编辑列级联操作
|
5月前
easyui datagrid reload后自动全选解决
easyui datagrid reload后自动全选解决
|
5月前
EasyUI Datagrid 分页事件
EasyUI Datagrid 分页事件

热门文章

最新文章