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

前一段时间,在界面中遇到从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中学习到的最基本的算法,产生不重复随机数,这里基于原有的基础上,稍作了一些变化,也只是根据业务不同而发生的变化,原有的知识通过再次复习,印象更加深刻了,理解和原来也不太一样了,知识还是要经常反复学习体会的。

时间: 2024-10-25 15:27:36

easyui------向datagrid中动态添加不重复的记录的相关文章

在EasyUI的DataGrid中嵌入Combobox

在做项目时,需要在EasyUI的DataGrid中嵌入Combobox,花了好几天功夫,在大家的帮助下,终于看到了它的庐山真面: 核心代码如下: <html> <head> @*添加Jquery EasyUI的样式*@ <link href="@Url.Content("../../Content/JqueryEasyUI/themes/default/easyui.css")" rel="stylesheet" /

android 在布局中动态添加控件

第一步 Java代码 final LayoutInflater inflater = LayoutInflater.from(this); 第二步:获取需要被添加控件的布局 Java代码 final LinearLayout lin = (LinearLayout) findViewById(R.id.LinearLayout01); 第三步:获取需要添加的布局(控件) Java代码 LinearLayout layout = (LinearLayout) inflater.inflate( R

Android 在布局容器中动态添加控件

这里,通过一个小demo,就可以掌握在布局容器中动态添加控件,以动态添加Button控件为例,添加其他控件同样道理. 1.addView 添加控件到布局容器 2.removeView 在布局容器中删掉已有的控件 3.使用,来个小demo就明白了 public class MainActivity extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(save

在CFormView或对话框中动态添加CScrollView、CFormView

在CFormView或对话框中动态添加CScrollView.CFormView 本代码可以在CFormView中,根据事先画好的控件位置创建CScrollView 也可以在CDialog中创建CScrollView.CFormView等 注: 若以下代码放在CMainRightView::OnCreate(LPCREATESTRUCT lpCreateStruct)内,则GetDlgItem()函数将调用失败,因为此时控件都还未被创建! void CMainRightView::OnIniti

Android在布局中动态添加view的两种方法

一.说明 添加视图文件的时候有两种方式:1.通过在xml文件定义layout:2.java代码编写 二.前言说明 1.构造xml文件 2.LayoutInflater 提到addview,首先要了解一下LayoutInflater类.这个类最主要的功能就是实现将xml表述的layout转化为View的功能.为了便于理解,我们可以将它与findViewById()作一比较,二者都是实例化某一对象,不同的是findViewById()是找xml布局文件下的具体widget控件实例化,而LayoutI

html页面下拉列表中动态添加后台数据(格式化数据,显示出数据的层次感)

html页面下拉列表中动态添加后台数据(格式化数据,显示出数据的层次感) 效果图: 运行原理和技术: 当页面加载完毕,利用jquery向后台发送ajax请求,去后台拼接<select></select>中的option字符串.让后将字符串响应回来,动态添加到<select>中.其中的字符串中包含了后台的数据. 页面js代码: 1 <script type="text/javascript"> 2 //加载部门 3 function loa

datagrid中动态url

function showDTbyid(id) { initTablListDP(); $('#tbwest').datagrid({ url: '/SuitAdd/ShowDTbyid/'+id  把url中抽出来 }); } function initTablListDP() { $('#tbwest').datagrid({ //url: '/SuitAdd/ShowDTbyid/'+id  title: '', width: 500, height: 320, fitColumns: t

vue中动态添加div

知识点:vue中动态添加div节点,点击添加,动态生成div,点击删除,删除对应的div,其中数组的长度是动态改变的,如在from表单中应用,直接在提交方法中,获得list,获取所填的元素即可 效果: 核心代码说明(样式代码可自行修改,详细代码请参照源码): <div v-for="(v,i) in list"> <div class="form-group m-form__group row" style="padding-top: 1

ASP.NET中Literal控件的使用方法(用于向网页中动态添加内容)

原文:https://www.jb51.net/article/82855.htm 可以将 Literal 控件用作网页上其他内容的容器.Literal 控件最常用于向网页中动态添加内容.简单的讲,就是可以把 HTML 代码写到 Literal 控件上,直接呈现出来. 一.常见Literal属性 属性 描述 Text 指定 Literal 控件中显示的文本.在用户的浏览器中,这会显示为 HTML. Mode 指定控件如何处理添入其中的标记. 二.基础用法 前台 LiteralTest.aspx