实例详解angularjs和ajax的结合使用(3)

搜索那个我也不想说了哈 就是重新载入下数据而已,删除是通过自定义 列的方式 传id到js函数 然后调用服务端删除。然后要说下 录入功能 以及easyui自带 的表单验证也是相当方便的。

新建一个div 作为弹出层 里面有一个录入信息的表格 各种html控件 只要写上easyui对应的样式  就自动渲染了 看弹出层的  data-options="closed:true,title:'新学生注册',modal:true"

其实很简单噻看字面意思就明白了 这些参数 都在easyui的文档里有。验证 也是在html元素上写data-options 就可以了, :

<div data-options="closed:true,title:'新学生注册',modal:true"> <table> <tr> <td>学生姓名:</td> <td> <input data-options="required:true,missingMessage:'必填项!',validType:'email',invalidMessage:'email格式不正确!'" type="text" /></td> </tr> <tr> <td>班级: </td> <td> <input data-options="valueField:'id',textField:'gradName',required:true,missingMessage:'必填项!'" /></td> </tr> <tr> <td> <input type="button" value="保存" /></td> <td> <input type="button" value="关闭" /></td> </tr> </table> </div>

新建按钮:

复制代码 代码如下:


 <a>加新的</a>

注意千万别用button 元素  就是这种 <button>新加的</button>  这是个坑 ,折腾了好久。

保存按钮调用 的js函数:

//保存信息 function saveClick() { var isvaliok = $("#addBox").form('validate');//包起来的需要提交信息的那个div框的id if (isvaliok == false) { $.messager.show({ title: '提示', msg: '请完善不正确的项后再提交', showType: 'show' }); return; } var stu = {}; stu.name = $("#stuname").val(); stu.age = ; stu.GradId = $("#grad").combobox('getValue'); stu.gradName = $("#grad").combobox('getValue'); if (isNaN(stu.GradId)) stu.GradId = null; var rst = WebApplication.NewFolder.HelloAjaxNet.addStu(stu); if (rst.value == "ok") { $('#addBox').dialog('close'); $('#studb').datagrid('reload'); var gradData = WebApplication.NewFolder.HelloAjaxNet.getGrad().value; $('#grad').combobox({ data: gradData }).combobox('reload'); } else { $.messager.show({ title: '提示', msg: rst.error.Message + rst.value, showType: 'show' }); } }

注意到了噻:

var isvaliok = $("#addBox").form('validate');//包起来的需要提交信息的那个div框的id if (isvaliok == false) { $.messager.show({ title: '提示', msg: '请完善不正确的项后再提交', showType: 'show' }); return; }

在easyui里进行验证很简单噻 只要在html代码里把验证格式定义好了 ,只需要传入一个最外面容器控件的id $("#addBox").form('validate') 就自动帮我们验证了。并且界面上还有提示 焦点自动放到第一个验证不通过的控件上去了 完全不需要我们动手。

当然我们在客户端 document.ready()的时候 必须要绑定表格和下拉框的数据:

$(function () { //页面初始化 //载入表格数据 bindDataToTb(); //载入班级下拉框 var gradData = WebApplication.NewFolder.HelloAjaxNet.getGrad().value; $('#grad').combobox({ data: gradData }).combobox('reload'); var fd = new FormData(); });

服务端保存的代码:

//添加 [AjaxPro.AjaxMethod] public string addStu(StudentsInfo stu) { MyDb db = new MyDb(); if(stu.GradId==null) { if (string.IsNullOrEmpty(stu.gradName) == false) { Grad grd = new Grad(); grd.gradName = stu.gradName; Grad grdOld = db.grads.FirstOrDefault(r => r.gradName == stu.gradName); if(grdOld!=null) { return "类别已存在"; } else { db.grads.Add(grd); stu.grad = grd; } } } db.Students.Add(stu); db.SaveChanges(); return "ok"; }

服务端代码  如果我们没有这个id的类别我们就认为这个类别是新的 ,新加一个类别 然后立即绑定 perfect 完美 ,棒棒哒

实例详解angularjs和ajax的结合使用

 

看上去是不是有模有样。做管理类软件还行。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wgzpxg.html