右击表格弹出编辑、删除框

前言

  

    之前ITOO验收的时候，米老师看到考评系统上用到了右击表格弹出编辑、删除框的效果，要求所有系统都要实现。本想着之前留下有文档，应该会比较容易实现，可是文档里的看着就好费劲，实现起来就更难了。所以想着用一个比较简便的方法实现这个效果，后面听到李卫中用了一个比较简单的方法实现这个效果，看了一下他写的博客，其实我还有些不懂，把他叫过来给我讲讲。看到他调代码的过程，对于这个方法的实现才有些明白，但是后面在实现编辑功能的时候，只能弹出一个编辑框，而编辑框里应该加载有选择行的内容，可是我的代码能力太弱了，但是也没有想着自己去百度，就叫来我的小伙伴王朋波来给我调试，半个小时下来，总算是把编辑框弄好了，但是效果还是有些瑕疵。觉得还可以再完善完善，但是不能再叫他来帮我完善。直到敲手机端的时候遇到了同一个问题，才有了解决办法，到后面也算是达到了自己想要的效果了。

实现步骤

1、编写右击触发事件的js文件

      

      注意：“#Family”是表格名称，编写的时候需要改成和自己系统里的表格名称一致的命名。

<span style="font-size:18px;"><script type="text/javascript">
    $("#Family").datagrid({
        onRowContextMenu: function (e, rowIndex, rowData) { //右键时触发事件  
            //三个参数：e应该是对当前菜单的实例化，以便调用；rowIndex就是当前点击时所在行的索引；rowData当前行的数据  
            e.preventDefault(); //阻止浏览器捕获右键事件  
            $(this).datagrid("clearSelections"); //取消所有选中项  
            $(this).datagrid("selectRow", rowIndex); //根据索引选中该行  
            $('#mm').menu('show', {
                //显示右键菜单  
                left: e.pageX,//在鼠标点击处显示菜单  
                top: e.pageY
            });
            var test = document.getElementById("index");
            test.value = rowIndex;
            e.preventDefault();  //阻止浏览器自带的右键菜单弹出  
        }
}); 
</script>
</span>

2、在页面上编写js代码

     

      注意：因为各系统功能不同，所以删除、修改的js代码段只需调用各系统本身的删除、修改的js代码段，这里的删除、修改的js代码只是新生系统里的一个例子，仅为参照。

<span style="font-size:18px;"><script type="text/javascript">
    //获取表格中行的序号，获取行内的各个元素值，即行内单元格里的信息，点击右击弹出编辑删除框的编辑时，把选择行内的数据信息获取到编辑框中
    function edit() {
        var index = document.getElementById("index").value;
        Modify(index);
}

//删除的js代码
    function doDelete() {
        var rows = $('#Family').datagrid('getSelections');
        //判断是否选择行
        if (!rows || rows.length == 0) {
            $.messager.alert('提醒', '请至少要选择一行数据', 'Info');
            return;
        }
        var strId;
        //循环ID，添加到idList中
        $.each(rows, function (i, n) {
            if (i == 0) {
                strId = "ID=" + n.Id;
            } else {
                strId += "&ID=" + n.Id;
            }
        });
        $.messager.confirm('确认', '您确认想要删除记录吗？', function (r) {
            if (r) {
                $.ajax({
                    type: "POST",
                    //async:flase,
                    url: "/StuFamEdu/DelFamily",
                    data: strId,
                    success: function () {
                        $.messager.alert("提示！", "信息删除成功！");
                        $("#Family").datagrid("reload");
                    },
                    error: function () {
                        $.messager.alert("警告！", "删除失败！");
                    }
                });
            }
        });
    }

//家庭成员信息修改
    function Modify(index) {
        
        $("#AddFamily").css("display", "block");     
        $("#AddFamily").dialog({
            title: '修改家庭成员信息',
            width: 380,
            height: 350,
            iconCls: 'icon-remove',    //弹出框图标
            buttons: [{
                text: '确定',
                iconCls: 'icon-ok',
                handler: function () {
                    var name = escape($("#Name").val());
                    var relation = escape($("#Relation").val());
                    var age = $("#Age").val();
                    var politicalStatus = escape($("#PoliticalStatus").combobox('getText'));
                    var telNum = $("#TelNum").val();
                    var workUnit = escape($("#WorkUnit").val());
                    var address = escape($("#Address").val());
                    var id = escape($("#IdentifyID").val());
                    if ($("#Name").val() == Name && $("#Relation").val() == Relation && age == Age && $('#PoliticalStatus').combobox('getText') == PoliticalStatus && telNum == TelNum && $("#WorkUnit").val() == WorkUnit && $("#Address").val() == Address) {
                        $.messager.alert('提醒', '请至少要修改一条数据', 'Info');
                        return;
                    }

                    if ($("#Name").val() == "" || $("#Relation").val() == "" || telNum == "" || age == "") {
                        $.messager.alert('提醒', '请至少要填写“姓名”，“关系” “年龄”和“电话号码”', 'Info');
                        return;
                    }
                    $.ajax({
                        type: "post", //表单提交类型 
                        url: "/StuFamEdu/ModifyFamily?IdentityID=@ViewData["IdentityID"]" + "&Name=" + name + "&Relation=" + relation + "&Age=" + age + "&PoliticalStatus=" + politicalStatus + "&TelNum=" + telNum + "&WorkUnit=" + workUnit + "&Address=" + address + "&id=" + id + "&t=" + new Date().getTime(), //表单提交目标 
                        data: null, //表单数据
                        success: function () {
                            $('#Family').datagrid('reload');
                            $('#AddFamily').window('close');
                        }
                    });
                }
            }, {
                text: '取消',
                iconCls: 'icon-cancel',
                handler: function () {
                    $('#AddFamily').window('close');
                }
            }]
        });
        var Name = $('#Family').datagrid("getRows")[index].Name;
        var Relation = $('#Family').datagrid("getRows")[index].RelationShip;
        var Age = $('#Family').datagrid("getRows")[index].Age;
        var PoliticalStatus = $('#Family').datagrid("getRows")[index].PoliticalStatus;
        var TelNum = $('#Family').datagrid("getRows")[index].TelNum;
        var WorkUnit = $('#Family').datagrid("getRows")[index].WorkUnit;
        var Address = $('#Family').datagrid("getRows")[index].Address;
        var IdentityID = $('#Family').datagrid("getRows")[index].Id;
        $("#Name").val(Name);
        $("#Relation").val(Relation);
        $("#Age").val(Age);
        $("#PoliticalStatus").combobox('setText', PoliticalStatus);
        $("#TelNum").val(TelNum);
        $("#WorkUnit").val(WorkUnit);
        $("#Address").val(Address);
        $("#IdentifyID").val(IdentityID);
}
</span>

3、在相关view页面上 

     这一段代码是对上面js代码段的调用，因为各系统的删除、编辑代码段的命名可能会不一样，需要注意一下id和onclick调用的名称是否和自己系统里的js代码段是否一致。

<span style="font-size:18px;"><div id="mm" class="easyui-menu" style="width: 120px;"> //mm为id标识，调用前面右击触发事件的js文件
    <input id="index" type="text" value="" style="display: none;"/>//index为选中行的标识，获取行内信息，
    <div id ="mody" onclick="edit()" data-options="plain:true,iconCls:'icon-edit'">编辑</div>//mody为修改事件标识，edit()是前面的修改js事件
    <div id ="delete" onclick="doDelete()" data-options="plain:true,iconCls:'icon-remove'">删除</div>//delete为删除事件标识，doDelete()是前面删除 js事件
</div>
</span>

4、实现效果

总结

      经过这个功能的实现，总算是明白了在ITOO系统里是如何调用JavaScript和CSS这些文件的，而这些文件的效果是如何在这个系统里实现的过程了。很感谢李卫中和王朋波这两位同学对我的帮助，不然的话，让我一个摸索，真的是够呛。