easyui------向datagrid中动态添加不重复的记录

最新推荐文章于 2021-09-14 09:48:00 发布

little_color

最新推荐文章于 2021-09-14 09:48:00 发布

阅读量5.7k

点赞数 1

分类专栏： JS

本文链接：https://blog.csdn.net/wangyy130/article/details/43915469

版权

JS 专栏收录该内容

16 篇文章 1 订阅

订阅专栏

本文详细介绍了如何在界面中从datagrid已有数据中选择数据到另一个datagrid，并实现了添加不重复记录的功能。通过级联查询显示所有学生，并通过算法筛选出未被选择的学生进行添加。复习了VB中基本的算法知识，如产生不重复随机数，并通过实例展示了业务场景下的应用。理解了原有知识在不同业务场景下的变化，强调了知识反复学习的重要性。

摘要由CSDN通过智能技术生成

前一段时间，在界面中遇到从datagrid已有数据中选择数据到另一个datagrid，这时，是需要考虑到添加不重复的记录的。

如下图所示的效果：

在第一次添加的时候，其实是要将所有选中的学生进行添加，那么如果第二次进行添加，就要进行过滤操作，这时只需要添加那些之前，没有选中的学生，所以这里又一次用到了原来学习到的产生不重复的随机数里面的知识了，又回忆了一遍，印象深刻了许多。

具体实现如下：

cshtml：这里第一个表格中的数据，通过级联查询，会将所有学生直接显示在表格中，第二个表格用来显示所有已选择的学生，如下：

 <div id="SelectStudent" style="margin-top:20px;">
        <div id="All" style="float:left;margin:auto 15px auto 15px; " >
              <table id="dgUnSelect" title="全部学生" class="easyui-datagrid" style="width: 300px;height:400px;"
                   url="" toolbar="#toolbar" pagination="true" rownumbers="true" fitcolumns="true">
                <thead>
                    <tr>
                        <th data-options="field:'ck',checkbox:true"></th>
                        <th field="StudentNo" width="50">学号</th>
                        <th field="Name" width="50">学生姓名</th>
                    </tr>
                </thead>
            </table>       
        </div>
        <div id="button" style="float:left;margin-top:120px;">
            <a id="AddStu" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true" >添加</a>
            <br/>
            <br/>
        
            <a id="DeleteStu" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true" >删除</a>
             <br/>
            <br/>
            <a id="OkAdd" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-ok',plain:true" >确认</a>

        </div>
       <div id="select" style="margin-left:440px;">
           <table id="dgSelect" title="已选学生" class="easyui-datagrid" style="width: 300px; height:400px;"
                   url="" toolbar="#toolbar" pagination="true" rownumbers="true" fitcolumns="true">
                <thead>
                    <tr>
                        <th data-options="field:'ck',checkbox:true"></th>
                        <th field="StudentNo" width="50">学号</th>
                        <th field="Name" width="50">学生姓名</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>

js：主要为点击添加按钮，页面的响应效果

 //点击添加学生按钮，选择学生+王炎炎+2015-2-5
    $('#AddStu').click(function () {

        var rows = $('#dgUnSelect').datagrid('getSelections');
        //先要判断，是否为已选学生

        var rowsSelected = $('#dgSelect').datagrid('getSelections');
        var rowsLength = $('#dgSelect').datagrid('getRows');
        //alert(rowsLength.length)
        if (rowsLength.length == 0) {
            for (var m = 0; m <= rows.length - 1; m++) {
                $('#dgSelect').datagrid("appendRow", {
                    StudentNo: rows[m].StudentNo,
                    Name: rows[m].Name
                });
            }
        }
        else {
            var flag = true;//不相等
            for (var i = 0; i <= rows.length - 1; i++)//未选择
            {

                for (var j = 0; j <= rowsLength.length - 1; j++)//已选择
                {
                    if (rows[i].StudentNo == rowsLength[j].StudentNo) {
                        flag = false;//相等
                        //$.messager.alert('提示', '学号为' + rows[i].StudentNo + '的学生已存在！', 'info');
                        break;
                    }
                    else {
                        flag = true;
                       
                    }
                }//j End

                if (flag == true) {
                    $('#dgSelect').datagrid("appendRow", {
                        StudentNo: rows[i].StudentNo,
                        Name: rows[i].Name
                    });
                }
            }//iend

        }
    })




    //点击删除按钮时+王炎炎+2015-2-6
    $('#DeleteStu').click(function () {
        var rows = $('#dgSelect').datagrid('getSelections');
        for (var i = 0; i < rows.length; i++) {
            var row = rows[i];
            var index = $('#dgSelect').datagrid('getRowIndex', row);//获取指定索引
            $('#dgSelect').datagrid('deleteRow', index);//删除指定索引的行
        }

    })

至此，整个页面效果就完成李了，剩下的就是，点击确认按钮后，将所选学生的具体信息传给后台，然后存进数据库了。

通过这个复习了一下原来VB中学习到的最基本的算法，产生不重复随机数，这里基于原有的基础上，稍作了一些变化，也只是根据业务不同而发生的变化，原有的知识通过再次复习，印象更加深刻了，理解和原来也不太一样了，知识还是要经常反复学习体会的。