这次给大家带来jQuery EasyUI在WIN中怎么使用,jQuery EasyUI在WIN中使用的注意事项有哪些,下面就是实战案例,一起来看一下。
nbsp;html> <meta> <title>管理取派员</title> <!-- 导入jquery核心类库 --> <script></script> <!-- 导入easyui类库 --> <link> <link> <link> <link> <script></script> <script></script> <script></script> <script></script> <script> 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> <p> </p>
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
推荐阅读:
以上就是jQuery EasyUI在WIN中怎么使用的详细内容,更多请关注php中文网其它相关文章!
Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号