EasyUIC#DataGrid 行内编辑

it2022-05-05  149

<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/> <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/> <link rel="stylesheet" type="text/css" href="easyui/demo/demo.css"/> <script type="text/javascript" src="easyui/jquery.min.js"></script> <script type="text/javascript" src="easyui/jquery.easyui.min.js" charset="utf-8"></script> <script type="text/javascript" src="easyui/jquery.edatagrid.js"></script> <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>

<script type="text/javascript">     $(function () {         $('#dg').edatagrid({             url: 'Controller.ashx?method=query',             saveUrl: 'Controller.ashx?method=add',             updateUrl: 'Controller.ashx?method=edit',             destroyUrl: 'Controller.ashx?method=delete'         });     }); </script> </head> <body>     <table id="dg" title="My Users" style="width:550px;height:250px"         toolbar="#toolbar" idField="id"         rownumbers="true" fitColumns="true" singleSelect="true">     <thead>         <tr>             <th field="id" width="50" editor="{type:'validatebox',options:{readonly:true}}">id</th>             <th field="name" width="50" editor="{type:'validatebox',options:{required:true}}">name</th>             <th field="url" width="50"  editor="{type:'validatebox',options:{required:true}}">url</th>             <th field="alexa" width="50" editor="{type:'validatebox',options:{validType:'integer',required:true}}">alexa</th>         </tr>       <!--validType:['email','length[0,20]']-->     </thead> </table> <div id="toolbar">     <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" οnclick="javascript:$('#dg').edatagrid('addRow')">New</a>     <a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" οnclick="javascript:$('#dg').edatagrid('destroyRow')">Destroy</a>     <a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true" οnclick="javascript:$('#dg').edatagrid('saveRow')">Save</a>     <a href="#" class="easyui-linkbutton" iconCls="icon-undo" plain="true" οnclick="javascript:$('#dg').edatagrid('cancelRow')">Cancel</a> </div> </body> </html>

 

(function ($) {

    /**      *      * @requires jQuery,EasyUI      *      * 扩展validatebox,添加验证两次密码功能      */     $.extend($.fn.validatebox.defaults.rules, {         eqPwd: {             validator: function (value, param) {                 return value == $(param[0]).val();             },             message: '密码不一致!'         },         idcard: {// 验证身份证             validator: function (value) {                 return /^\d{15}(\d{2}[A-Za-z0-9])?$/i.test(value);             },             message: '身份证号码格式不正确'         },         minLength: {             validator: function (value, param) {                 return value.length >= param[0];             },             message: '请输入至少(2)个字符.'         },         length: {             validator: function (value, param) {                 var len = $.trim(value).length;                 return len >= param[0] && len <= param[1];             },             message: "输入内容长度必须介于{0}和{1}之间."         },         phone: {// 验证电话号码             validator: function (value) {                 return /^((\(\d{2,3}\))|(\d{3}\-))?(\(0\d{2,3}\)|0\d{2,3}-)?[1-9]\d{6,7}(\-\d{1,4})?$/i.test(value);             },             message: '格式不正确,请使用下面格式:010-88888888'         },         mobile: {// 验证手机号码             validator: function (value) {                 return /^(13|15|18)\d{9}$/i.test(value);             },             message: '手机号码格式不正确'         },         intOrFloat: {// 验证整数或小数             validator: function (value) {                 return /^\d+(\.\d+)?$/i.test(value);             },             message: '请输入数字,并确保格式正确'         },         currency: {// 验证货币             validator: function (value) {                 return /^\d+(\.\d+)?$/i.test(value);             },             message: '货币格式不正确'         },         qq: {// 验证QQ,从10000开始             validator: function (value) {                 return /^[1-9]\d{4,9}$/i.test(value);             },             message: 'QQ号码格式不正确'         },         integer: {// 验证整数             validator: function (value) {                 return /^[+]?[1-9]+\d*$/i.test(value);             },             message: '请输入整数数字'         },         age: {// 验证年龄             validator: function (value) {                 return /^(?:[1-9][0-9]?|1[01][0-9]|120)$/i.test(value);             },             message: '年龄必须是0到120之间的整数'         },         chinese: {// 验证中文             validator: function (value) {                 return /^[\Α-\¥]+$/i.test(value);             },             message: '请输入中文'         },         english: {// 验证英语             validator: function (value) {                 return /^[A-Za-z]+$/i.test(value);             },             message: '请输入英文'         },         unnormal: {// 验证是否包含空格和非法字符             validator: function (value) {                 return /.+/i.test(value);             },             message: '输入值不能为空和包含其他非法字符'         },         username: {// 验证用户名             validator: function (value) {                 return /^[a-zA-Z][a-zA-Z0-9_]{5,15}$/i.test(value);             },             message: '用户名不合法(字母开头,允许6-16字节,允许字母数字下划线)'         },         faxno: {// 验证传真             validator: function (value) {                 return /^((\(\d{2,3}\))|(\d{3}\-))?(\(0\d{2,3}\)|0\d{2,3}-)?[1-9]\d{6,7}(\-\d{1,4})?$/i.test(value);             },             message: '传真号码不正确'         },         zip: {// 验证邮政编码             validator: function (value) {                 return /^[0-9]\d{5}$/i.test(value);             },             message: '邮政编码格式不正确'         },         ip: {// 验证IP地址             validator: function (value) {                 return /d+.d+.d+.d+/i.test(value);             },             message: 'IP地址格式不正确'         },         name: {// 验证姓名,可以是中文或英文             validator: function (value) {                 return /^[\Α-\¥]+$/i.test(value) | /^\w+[\w\s]+\w+$/i.test(value);             },             message: '请输入姓名'         },         msn: {             validator: function (value) {                 return /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(value);             },             message: '请输入有效的msn账号(例:abc@hotnail(msn/live).com)'         }     });

    /**      *      * @requires jQuery,EasyUI      *      * 扩展tree,使其支持平滑数据格式      */     $.fn.tree.defaults.loadFilter = function (data, parent) {         var opt = $(this).data().tree.options;         var idFiled, textFiled, parentField;         if (opt.parentField) {             idFiled = opt.idFiled || 'id';             textFiled = opt.textFiled || 'text';             parentField = opt.parentField;             var i, l, treeData = [], tmpMap = [];             for (i = 0, l = data.length; i < l; i++) {                 tmpMap[data[i][idFiled]] = data[i];             }             for (i = 0, l = data.length; i < l; i++) {                 if (tmpMap[data[i][parentField]] && data[i][idFiled] != data[i][parentField]) {                     if (!tmpMap[data[i][parentField]]['children'])                         tmpMap[data[i][parentField]]['children'] = [];                     data[i]['text'] = data[i][textFiled];                     tmpMap[data[i][parentField]]['children'].push(data[i]);                 } else {                     data[i]['text'] = data[i][textFiled];                     treeData.push(data[i]);                 }             }             return treeData;         }         return data;     }; })(jQuery);

 

 

 

 public class Controller : IHttpHandler     {

        public void ProcessRequest(HttpContext context)         {             String method = context.Request.Params.Get("method");             if (method == "query")             {                 getData(context);             }             else if (method == "add")             {               //  String id = context.Request.Form["id"].ToString();                 String name = context.Request.Form["name"].ToString();                 String url = context.Request.Form["url"].ToString();                 String alexa = context.Request.Form["alexa"].ToString();                 String sql = "insert into websites values(null,'" + name + "','" + url + "','" + alexa + "')";                 addData(context, sql);                 JavaScriptSerializer jsSerializer = new JavaScriptSerializer();

                context.Response.Write(jsSerializer.Serialize("添加成功"));                 context.Response.End();             }             else if (method == "edit")             {                 String id = context.Request.Form["id"].ToString();                 String name = context.Request.Form["name"].ToString();                 String url = context.Request.Form["url"].ToString();                 String alexa = context.Request.Form["alexa"].ToString();                 String sql = "update websites set name='" + name + "',url='" + url + "', alexa='" + alexa + "' where id='" + id + "'";                 editData(context, sql);                 JavaScriptSerializer jsSerializer = new JavaScriptSerializer();                 Dictionary<String, String> map = new Dictionary<string, string>();                 map.Add("success","成功");                 map.Add("error", "失败");

                context.Response.Write(jsSerializer.Serialize(map));                 context.Response.End();             }             else if (method == "delete")             {                 Dictionary<String, String> map = new Dictionary<string, string>();                 JavaScriptSerializer jsSerializer = new JavaScriptSerializer();                 try                 {                     String id = context.Request.Form["id"].ToString();                     String sql = "delete from websites where id=" + id;                     connectDB cd = new connectDB();                     cd.executeNoQuery(sql);                     map.Add("success", "成功");                     context.Response.Write(jsSerializer.Serialize(map));                     HttpContext.Current.ApplicationInstance.CompleteRequest();

                }                 catch (Exception e)                 {                     map.Add("error", e.Message.ToString());                     context.Response.Write(jsSerializer.Serialize(map));                     HttpContext.Current.ApplicationInstance.CompleteRequest();                 }                              }

        }         public void addData(HttpContext context,String sql)         {             connectDB cd = new connectDB();             cd.executeNoQuery(sql);         }         public void editData(HttpContext context, String sql)         {             connectDB cd = new connectDB();             cd.executeNoQuery(sql);         }         public void getData(HttpContext context)         {             connectDB cd = new connectDB();             DataTable dt = cd.executeDataTable("select id,name,url,alexa from websites");

            List<Dictionary<string, string>> list = new List<Dictionary<string, string>>();             for (int i = 0; i < dt.Rows.Count; i++)             {                 Dictionary<string, string> d = new Dictionary<string, string>();                 for(int j=0;j<dt.Columns.Count;j++)                 {                     d.Add(dt.Columns[j].ColumnName,dt.Rows[i][j].ToString());                 }                 list.Add(d);             }                         // string commentsJson = DataTableToJsonWithJavaScriptSerializer(dt);             JavaScriptSerializer jsSerializer = new JavaScriptSerializer();             string commentsJson = jsSerializer.Serialize(list);

            context.Response.Write(commentsJson);             //  context.Response.End();         }         public string DataTableToJsonWithJavaScriptSerializer(DataTable table)         {

            JavaScriptSerializer jsSerializer = new JavaScriptSerializer();

            List<Dictionary<string, object>> parentRow = new List<Dictionary<string, object>>();

            Dictionary<string, object> childRow;

            foreach (DataRow row in table.Rows)             {

                childRow = new Dictionary<string, object>();

                foreach (DataColumn col in table.Columns)                 {

                    childRow.Add(col.ColumnName, row[col]);

                }

                parentRow.Add(childRow);

            }

            return jsSerializer.Serialize(parentRow);

        }         public void Alert(string message, HttpContext context)         {             string js = @"<Script language='JavaScript'>                     alert('" + message + "');</Script>";             context.Response.Write(js);         }         public bool IsReusable         {             get             {                 return false;             }         }     }

 

 

 

 


最新回复(0)