这次给大家带来jQuery EasyUI在WIN中怎么使用,jQuery EasyUI在WIN中使用的注意事项有哪些,下面就是实战案例,一起来看一下。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>管理取派员</title> <!-- 导入jquery核心类库 --> <script type="text/javascript" src="../../js/jquery-1.8.3.js"></script> <!-- 导入easyui类库 --> <link rel="stylesheet" type="text/css" href="../../js/easyui/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="../../js/easyui/themes/icon.css"> <link rel="stylesheet" type="text/css" href="../../js/easyui/ext/portal.css"> <link rel="stylesheet" type="text/css" href="../../css/default.css"> <script type="text/javascript" src="../../js/easyui/jquery.easyui.min.js"></script> <script type="text/javascript" src="../../js/easyui/ext/jquery.portal.js"></script> <script type="text/javascript" src="../../js/easyui/ext/jquery.cookie.js"></script> <script src="../../js/easyui/locale/easyui-lang-zh_CN.js" type="text/javascript"></script> <script type="text/javascript"> function doAdd(){ $('#addWindow').window("open"); } function doEdit(){ alert("修改..."); } function doDelete(){ alert("删除..."); } function doRestore(){ alert("将取派员还原..."); } //工具栏 var toolbar = [ { id : 'button-add', text : '增加', iconCls : 'icon-add', handler : doAdd }, { id : 'button-edit', text : '修改', iconCls : 'icon-edit', handler : doEdit }, { id : 'button-delete', text : '作废', iconCls : 'icon-cancel', handler : doDelete },{ id : 'button-restore', text : '还原', iconCls : 'icon-save', handler : doRestore }]; // 定义列 var columns = [ [ { field : 'id', checkbox : true, },{ field : 'courierNum', title : '工号', width : 80, align : 'center' },{ field : 'name', title : '姓名', width : 80, align : 'center' }, { field : 'telephone', title : '手机号', width : 120, align : 'center' }, { field : 'checkPwd', title : '查台密码', width : 120, align : 'center' }, { field : 'pda', title : 'PDA号', width : 120, align : 'center' }, { field : 'standard.name', title : '取派标准', width : 120, align : 'center', formatter : function(data,row, index){ if(row.standard != null){ return row.standard.name; } return ""; } }, { field : 'type', title : '取派员类型', width : 120, align : 'center' }, { field : 'company', title : '所属单位', width : 200, align : 'center' }, { field : 'deltag', title : '是否作废', width : 80, align : 'center', formatter : function(data,row, index){ if(data=="0"){ return "正常使用" }else{ return "已作废"; } } }, { field : 'vehicleType', title : '车型', width : 100, align : 'center' }, { field : 'vehicleNum', title : '车牌号', width : 120, align : 'center' } ] ]; $(function(){ // 先将body隐藏,再显示,不会出现页面刷新效果 $("body").css({visibility:"visible"}); // 取派员信息表格 $('#grid').datagrid( { iconCls : 'icon-forward', fit : true, border : false, rownumbers : true, striped : true, pageList: [30,50,100], pagination : true, toolbar : toolbar, url : "../../data/courier.json", idField : 'id', columns : columns, onDblClickRow : doDblClickRow }); // 添加取派员窗口 $('#addWindow').window({ title: '添加取派员', width: 800, modal: true, shadow: true, closed: true, height: 400, resizable:false }); //对收派标准save按钮,添加点击事件 $("#save").click(function(){ //判断是否form中的所有表单对象都通过校验 if($("#standardForm").form('validate')){ //都通过校验 $("#standardForm").submit(); }else{ $.messager.alert("警告","表单存在非法内容,请重新填写","warning"); } //关闭窗口 $("#addWindow").window('sclose'); }); }); function doDblClickRow(){ alert("双击表格数据..."); } </script> </head> <body class="easyui-layout" style="visibility:hidden;"> <p region="center" border="false"> <table id="grid"></table> </p> <p class="easyui-window" title="对收派员进行添加或者修改" id="addWindow" collapsible="false" minimizable="false" maximizable="false" style="top:20px;left:200px"> <p region="north" style="height:31px;overflow:hidden;" split="false" border="false"> <p class="datagrid-toolbar"> <a id="save" icon="icon-save" href="#" class="easyui-linkbutton" plain="true">保存</a> </p> </p> <p region="center" style="overflow:auto;padding:5px;" border="false"> <form id="standardForm" action="../../standard_save.action" method="post"> <table class="table-edit" width="80%" align="center"> <tr class="title"> <td colspan="4">收派员信息</td> </tr> <tr> <td>快递员工号</td> <td> <input type="text" name="courierNum" class="easyui-validatebox" required="true" /> </td> <td>姓名</td> <td> <input type="text" name="name" class="easyui-validatebox" required="true" /> </td> </tr> <tr> <td>手机</td> <td> <input type="text" name="telephone" class="easyui-validatebox" required="true" /> </td> <td>所属单位</td> <td> <input type="text" name="company" class="easyui-validatebox" required="true" /> </td> </tr> <tr> <td>查台密码</td> <td> <input type="text" name="checkPwd" class="easyui-validatebox" required="true" /> </td> <td>PDA号码</td> <td> <input type="text" name="pda" class="easyui-validatebox" required="true" /> </td> </tr> <tr> <td>快递员类型</td> <td> <input type="text" name="type" class="easyui-validatebox" required="true" /> </td> <td>取派标准</td> <td> <input type="text" name="standard.id" class="easyui-combobox" data-options="required:true,valueField:'id',textField:'name', url:'../../standard_findAll.action'"/> </td> </tr> <tr> <td>车型</td> <td> <input type="text" name="vehicleType" class="easyui-validatebox" required="true" /> </td> <td>车牌号</td> <td> <input type="text" name="vehicleNum" class="easyui-validatebox" required="true" /> </td> </tr> </table> </form> </p> </p> <!-- 查询快递员--> <p class="easyui-window" title="查询快递员窗口" closed="true" id="searchWindow" collapsible="false" minimizable="false" maximizable="false" style="width: 400px; top:40px;left:200px"> <p style="overflow:auto;padding:5px;" border="false"> <form id="searchForm"> <table class="table-edit" width="80%" align="center"> <tr class="title"> <td colspan="2">查询条件</td> </tr> <tr> <td>工号</td> <td> <input type="text" name="courierNum" /> </td> </tr> <tr> <td>收派标准</td> <td> <input type="text" name="standard.name" /> </td> </tr> <tr> <td>所属单位</td> <td> <input type="text" name="company" /> </td> </tr> <tr> <td>类型</td> <td> <input type="text" name="type" /> </td> </tr> <tr> <td colspan="2"><a id="searchBtn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">查询</a> </td> </tr> </table> </form> </p> </p> </body> </html>
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
推荐阅读:
以上是jQuery EasyUI在WIN中怎么使用的详细内容。更多信息请关注PHP中文网其他相关文章!

JavaScript在现实世界中的应用包括服务器端编程、移动应用开发和物联网控制:1.通过Node.js实现服务器端编程,适用于高并发请求处理。2.通过ReactNative进行移动应用开发,支持跨平台部署。3.通过Johnny-Five库用于物联网设备控制,适用于硬件交互。

我使用您的日常技术工具构建了功能性的多租户SaaS应用程序(一个Edtech应用程序),您可以做同样的事情。 首先,什么是多租户SaaS应用程序? 多租户SaaS应用程序可让您从唱歌中为多个客户提供服务

本文展示了与许可证确保的后端的前端集成,并使用Next.js构建功能性Edtech SaaS应用程序。 前端获取用户权限以控制UI的可见性并确保API要求遵守角色库

JavaScript是现代Web开发的核心语言,因其多样性和灵活性而广泛应用。1)前端开发:通过DOM操作和现代框架(如React、Vue.js、Angular)构建动态网页和单页面应用。2)服务器端开发:Node.js利用非阻塞I/O模型处理高并发和实时应用。3)移动和桌面应用开发:通过ReactNative和Electron实现跨平台开发,提高开发效率。

JavaScript的最新趋势包括TypeScript的崛起、现代框架和库的流行以及WebAssembly的应用。未来前景涵盖更强大的类型系统、服务器端JavaScript的发展、人工智能和机器学习的扩展以及物联网和边缘计算的潜力。

JavaScript是现代Web开发的基石,它的主要功能包括事件驱动编程、动态内容生成和异步编程。1)事件驱动编程允许网页根据用户操作动态变化。2)动态内容生成使得页面内容可以根据条件调整。3)异步编程确保用户界面不被阻塞。JavaScript广泛应用于网页交互、单页面应用和服务器端开发,极大地提升了用户体验和跨平台开发的灵活性。

Python更适合数据科学和机器学习,JavaScript更适合前端和全栈开发。 1.Python以简洁语法和丰富库生态着称,适用于数据分析和Web开发。 2.JavaScript是前端开发核心,Node.js支持服务器端编程,适用于全栈开发。

JavaScript不需要安装,因为它已内置于现代浏览器中。你只需文本编辑器和浏览器即可开始使用。1)在浏览器环境中,通过标签嵌入HTML文件中运行。2)在Node.js环境中,下载并安装Node.js后,通过命令行运行JavaScript文件。


热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

AI Hentai Generator
免费生成ai无尽的。

热门文章

热工具

Atom编辑器mac版下载
最流行的的开源编辑器

SecLists
SecLists是最终安全测试人员的伙伴。它是一个包含各种类型列表的集合,这些列表在安全评估过程中经常使用,都在一个地方。SecLists通过方便地提供安全测试人员可能需要的所有列表,帮助提高安全测试的效率和生产力。列表类型包括用户名、密码、URL、模糊测试有效载荷、敏感数据模式、Web shell等等。测试人员只需将此存储库拉到新的测试机上,他就可以访问到所需的每种类型的列表。

DVWA
Damn Vulnerable Web App (DVWA) 是一个PHP/MySQL的Web应用程序,非常容易受到攻击。它的主要目标是成为安全专业人员在合法环境中测试自己的技能和工具的辅助工具,帮助Web开发人员更好地理解保护Web应用程序的过程,并帮助教师/学生在课堂环境中教授/学习Web应用程序安全。DVWA的目标是通过简单直接的界面练习一些最常见的Web漏洞,难度各不相同。请注意,该软件中

SublimeText3 Linux新版
SublimeText3 Linux最新版

EditPlus 中文破解版
体积小,语法高亮,不支持代码提示功能