easyui datagrid 单元格编辑 即见即所得,MVC菜单维护,扫描增加

效果如图:

参见 EasyUI 官方 Demo 及文档

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<script src="~/jquery-easyui-1.4.2/locale/easyui-lang-zh_CN.js"></script>
<table id="datagrid" class="easyui-datagrid" title="" style="width: 100%;"
    data-options="rownumbers:true,autoRowHeight:false,pagination:true,toolbar:‘#tb‘,footer:‘#ft‘,fit:true,
                pageSize:50,singleSelect:true,collapsible:true,url:‘@Url.Action("GetGridJSON")‘,method:‘post‘,fixed:true,
                remoteSort:false,onClickCell: onClickCell,onAfterEdit:onAfterEdit,
                multiSort:true">
    <thead>
        <tr>
            <th data-options="field:‘Id‘,checkbox:true"></th>
            <th data-options="field:‘Url‘,editor:‘text‘">Url</th>
            <th data-options="field:‘MenuNo‘,editor:‘text‘">MenuNo</th>
            <th data-options="field:‘MenuLevel‘,editor:‘text‘">MenuLevel</th>
            <th data-options="field:‘MenuName‘,editor:‘text‘">MenuName</th>
        </tr>
    </thead>
</table>
<div id="tb" style="padding: 2px 5px;">
    <a href="#" class="easyui-linkbutton" iconcls="icon-add" plain="true">增加</a>
    @*<a href="#" class="easyui-linkbutton" iconcls="icon-edit" plain="true">修改</a>*@
    <a href="#" class="easyui-linkbutton" iconcls="icon-cancel" plain="true">删除</a>
    <a href="#" class="easyui-linkbutton" iconcls="icon-xls" plain="true">导出Excel</a>
    <a href="#" class="easyui-linkbutton" iconcls="icon-scan" plain="true">扫描添加</a>

    <select onchange="$(‘#datagrid‘).datagrid({singleSelect:(this.value==0)})">
        <option value="0">选中单行</option>
        <option value="1">选中多行</option>
    </select>
    <input class="easyui-textbox" id="MenuNo" value="" name="MenuNo" data-options="prompt:‘MenuNo:‘" style="height: 22px; width: 120px">
    <input class="easyui-textbox" id="url" value="" name="url" data-options="prompt:‘url:‘" style="height: 22px; width: 120px">
    <input class="easyui-textbox" id="MenuName" value="" name="MenuName" data-options="prompt:‘MenuName:‘" style="height: 22px; width: 120px">
    <a href="#" class="easyui-linkbutton" onclick="doSearch()" iconcls="icon-search">查询</a>
    <div id="w" class="easyui-window" title="Modal Window" data-options="modal:true,closed:true" style="padding: 10px;">
    </div>
</div>

<script>
    var UrlActionToExcel = "@Url.Action("ToExcel")";
    $(document).ready(function () {
        $("[iconcls=‘icon-scan‘]").click(function () {
            $.ajax({
                type: "GET",
                url: "scan",
                async: false, success: function (data) {
                    doSearch();
                    parent.showMsgTopCenter("提示", "已经生成" + data + "行记录");

                }
            });
        });

    });
</script>
<script type="text/javascript">
    $.extend($.fn.datagrid.methods, {
        editCell: function (jq, param) {
            return jq.each(function () {
                var opts = $(this).datagrid(‘options‘);
                var fields = $(this).datagrid(‘getColumnFields‘, true).concat($(this).datagrid(‘getColumnFields‘));
                for (var i = 0; i < fields.length; i++) {
                    var col = $(this).datagrid(‘getColumnOption‘, fields[i]);
                    col.editor1 = col.editor;
                    if (fields[i] != param.field) {
                        col.editor = null;
                    }
                }
                $(this).datagrid(‘beginEdit‘, param.index);
                for (var i = 0; i < fields.length; i++) {
                    var col = $(this).datagrid(‘getColumnOption‘, fields[i]);
                    col.editor = col.editor1;
                }
            });
        }
    });

    var editIndex = undefined;
    function endEditing() {
        if (editIndex == undefined) { return true }
        if ($(‘#datagrid‘).datagrid(‘validateRow‘, editIndex)) {// 检测  数据是否发生 改变
            $(‘#datagrid‘).datagrid(‘endEdit‘, editIndex);// 触发 onAfterEdit  方法
            editIndex = undefined;
            return true;
        } else {
            return false;
        }
    }

    function onClickCell(index, field, data) {
        if (endEditing()) {
            $(‘#datagrid‘).datagrid(‘selectRow‘, index)
                    .datagrid(‘editCell‘, { index: index, field: field, data: data });
            editIndex = index;
        }
    }

    function onAfterEdit(rowIndex, rowData, changes) {//  onAfterEdit 在  rowData 本行数据 ,changes 发生改变的数据
        for (change in changes) {
            var temp = {};
            temp[change] = changes[change];
            temp["Id"] = rowData.Id;
            temp["MenuLevel"] = rowData.MenuLevel; // 这是 int 类型 ,后台  只排除 string == null,所有要加上
            $.ajax({

                type: "POST", url: "updateCell", traditional: true, data: temp,//每次 只修改 一行数据中的 某一个字段
                async: false, dataType: "json", sunccess: function (data) {//dataType  没有限制
                       parent.showMsgTopCenter("提示", "已修改" + data + "行数据");                }
            })
        }
    }
</script>
        public void UpdateCell(Sys_Menu model)
        {
            ef_Help.ModifyWithOutproNames<Sys_Menu>(model);
            Response.Write(db.SaveChanges());
            Response.End();
        }
        public int Scan()
        {
            var My_Assembly = Assembly.GetExecutingAssembly();// 获得 当前 正在 运行 的程序集
            My_Assembly.GetType().GetMethods();
            string[] ReturnTyoes = { "ActionResult", "Int32", "String" };//只接收  返回值类型 为 这3中的方法。
            var Models = db.Sys_Menu.ToList();// 菜单集合
            foreach (Type type in My_Assembly.GetTypes())//遍历所有 类
            {
                if (type.Name.Contains("Controller") && type.FullName.Contains("Areas"))// 只扫描 Areas 下的 Controller  类
                {
                    var FullName = type.FullName.Split(‘.‘);
                    var AreaName = FullName[2];//获得区域名称
                    var ControllerName = FullName[4].Substring(0, FullName[4].Length - "Controller".Length);//获得 Control 名称
                    foreach (var Method in type.GetMethods())//遍历 所有 方法
                    {
                        if (ReturnTyoes.Contains(Method.ReturnType.Name) && Method.DeclaringType.Name != "Object")// 排除 基类  Object ,及它的方法
                        {
                            var Url = string.Format("/{0}/{1}/{2}", AreaName, ControllerName, Method.Name);
                            if (Models.Where(X => X.Url == Url).FirstOrDefault() == null)// 排除 已有的Url
                            {
                                db.Sys_Menu.Add(new Sys_Menu()
                                {
                                    MenuLevel = 0,
                                    MenuName = "未知",
                                    MenuNo = "未知",
                                    Url = Url
                                });
                            }
                        }
                    }
                }
            }
            return db.SaveChanges();
        }
时间: 2024-07-29 06:56:16

easyui datagrid 单元格编辑 即见即所得,MVC菜单维护,扫描增加的相关文章

JQuery easyui datagrid 单元格编辑时,使用浮动的textarea文本框并进行数据校验

有两种方式实现,一种方式是在html中验证,一种方式是在js中进行验证 方式一: <th data-options="filed:'remark',width:200,editor:{type:'textarea'}">备注</th> 方式二: <th data-options="filed:'remark',width:200,editor:{type:'textarea', options:{validType:'maxLength[150]

easyui datagrid 单元格编辑保存

要求分数和排序两列能编辑 //查询该试卷题型的试题 $('#allList1').datagrid({ url:app.approot+"paperRes/getPaperQuestionList/"+ptyid, handler:function(){ //接受改变的值 $('#allList1').datagrid('acceptChanges'); }, onBeforeEdit: function (rowIndex,rowData) { $("#selQuestio

easyui datagrid 单元格编辑 自动聚焦 、全选

$.extend($.fn.datagrid.methods, { editCell: function (jq, param) { return jq.each(function () { var opts = $(this).datagrid('options'); var fields = $(this).datagrid('getColumnFields', true).concat($(this).datagrid('getColumnFields')); for (var i = 0

DevExpress控件 DataGrid 单元格编辑 回车

using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Windows.Forms; using CYSoft.UI.Common; using CYSoft.Common; using CYSoft.TS.Entit

Easyui datagrid 单元格格式化函数formatter的使用

$('#dg').datagrid({ columns:[[ {field:'userId',title:'User', width:80, formatter: function(value,row,index){ if (row.user){ return row.user.name; } else { return value; } } } ]] }); 以上是通过JS来进行调用 单元格格式化函数formatter带三个参数: value:单元格的字段值 rowData:该单元格所在行的行

获取wpf datagrid单元格编辑事件

DataGrid标签中加 <i:Interaction.Triggers> <i:EventTrigger EventName="CellEditEnding" > <i:InvokeCommandAction Command="{Binding CellEditEndingCommand}" CommandParameter="{Binding ElementName=DataGrid1}" /> </

MFC List Control控件添加单元格编辑和单元格下拉列表项以适用于数据库相关操作

作为现代的软件,往往是连着数据库的,而连着和用户方便地操作之间,还有着界面这道坎.MFC是Windows上比较好开发用户界面的框架,然而其自带的控件中没有对于数据库表格支持较好的控件,而使用网上提到的 DataGrid 等控件在本人的win8.1+VS2013平台上老出现找不到控件或者头文件的问题,搞的烦死人.最后想到 List Control 控件只要稍作修改,加上单元格编辑和单元格下拉列表,其实就能和数据库进行良好的对接,一百度,果然有人已经做了这件事,实在是太让人感动了!       

遍历WPF DataGrid单元格

using System.Windows.Controls; using System.Windows.Controls.Primitives; using System.Windows.Media; namespace Splash.WPF { public static class DataGridPlus { /// <summary> /// 获取DataGrid控件单元格 /// </summary> /// <param name="dataGrid&q

easyui datagrid的列编辑

[第十五篇]easyui datagrid的列编辑,同时插入两张表的数据进去 看图说话. 需求:插入两张表,上面的表单是第一张表的内容,下面的两个表格是第二张详情表的内容,跟第一张表的id关联 第二张表有一个列是需要用户手动填写添加的. 国际惯例,上代码 <div id="cc" class="easyui-layout" style="width: 100%; height: 380px;"> <div data-option