How to use jQuery EasyUI in WIN-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

How to use jQuery EasyUI in WIN

Apr 19, 2018 pm 02:01 PM

easyui jquery use

This time I will show you how to use jQuery EasyUI in WIN. What are the precautions when using jQuery EasyUI in WIN. The following is a practical case, let's take a look.

&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;title&gt;管理取派员&lt;/title&gt;
    &lt;!-- 导入jquery核心类库 --&gt;
    &lt;script type=&quot;text/javascript&quot; src=&quot;../../js/jquery-1.8.3.js&quot;&gt;&lt;/script&gt;
    &lt;!-- 导入easyui类库 --&gt;
    &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;../../js/easyui/themes/default/easyui.css&quot;&gt;
    &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;../../js/easyui/themes/icon.css&quot;&gt;
    &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;../../js/easyui/ext/portal.css&quot;&gt;
    &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;../../css/default.css&quot;&gt;
    &lt;script type=&quot;text/javascript&quot; src=&quot;../../js/easyui/jquery.easyui.min.js&quot;&gt;&lt;/script&gt;
    &lt;script type=&quot;text/javascript&quot; src=&quot;../../js/easyui/ext/jquery.portal.js&quot;&gt;&lt;/script&gt;
    &lt;script type=&quot;text/javascript&quot; src=&quot;../../js/easyui/ext/jquery.cookie.js&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;../../js/easyui/locale/easyui-lang-zh_CN.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
    &lt;script type=&quot;text/javascript&quot;&gt;
      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("双击表格数据...");
      }
    &lt;/script&gt;
  &lt;/head&gt;
  &lt;body class=&quot;easyui-layout&quot; style=&quot;visibility:hidden;&quot;&gt;
    &lt;p region=&quot;center&quot; border=&quot;false&quot;&gt;
      &lt;table id=&quot;grid&quot;&gt;&lt;/table&gt;
    &lt;/p&gt;
    &lt;p class=&quot;easyui-window&quot; title=&quot;对收派员进行添加或者修改&quot; id=&quot;addWindow&quot; collapsible=&quot;false&quot; minimizable=&quot;false&quot; maximizable=&quot;false&quot; style=&quot;top:20px;left:200px&quot;&gt;
      &lt;p region=&quot;north&quot; style=&quot;height:31px;overflow:hidden;&quot; split=&quot;false&quot; border=&quot;false&quot;&gt;
        &lt;p class=&quot;datagrid-toolbar&quot;&gt;
          &lt;a id=&quot;save&quot; icon=&quot;icon-save&quot; href=&quot;#&quot; class=&quot;easyui-linkbutton&quot; plain=&quot;true&quot;&gt;保存&lt;/a&gt;
        &lt;/p&gt;
      &lt;/p&gt;
      &lt;p region=&quot;center&quot; style=&quot;overflow:auto;padding:5px;&quot; border=&quot;false&quot;&gt;
        &lt;form id=&quot;standardForm&quot; action=&quot;../../standard_save.action&quot; method=&quot;post&quot;&gt;
          &lt;table class=&quot;table-edit&quot; width=&quot;80%&quot; align=&quot;center&quot;&gt;
            &lt;tr class=&quot;title&quot;&gt;
              &lt;td colspan=&quot;4&quot;&gt;收派员信息&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
              &lt;td&gt;快递员工号&lt;/td&gt;
              &lt;td&gt;
                &lt;input type=&quot;text&quot; name=&quot;courierNum&quot; class=&quot;easyui-validatebox&quot; required=&quot;true&quot; /&gt;
              &lt;/td&gt;
              &lt;td&gt;姓名&lt;/td&gt;
              &lt;td&gt;
                &lt;input type=&quot;text&quot; name=&quot;name&quot; class=&quot;easyui-validatebox&quot; required=&quot;true&quot; /&gt;
              &lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
              &lt;td&gt;手机&lt;/td&gt;
              &lt;td&gt;
                &lt;input type=&quot;text&quot; name=&quot;telephone&quot; class=&quot;easyui-validatebox&quot; required=&quot;true&quot; /&gt;
              &lt;/td&gt;
              &lt;td&gt;所属单位&lt;/td&gt;
              &lt;td&gt;
                &lt;input type=&quot;text&quot; name=&quot;company&quot; class=&quot;easyui-validatebox&quot; required=&quot;true&quot; /&gt;
              &lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
              &lt;td&gt;查台密码&lt;/td&gt;
              &lt;td&gt;
                &lt;input type=&quot;text&quot; name=&quot;checkPwd&quot; class=&quot;easyui-validatebox&quot; required=&quot;true&quot; /&gt;
              &lt;/td&gt;
              &lt;td&gt;PDA号码&lt;/td&gt;
              &lt;td&gt;
                &lt;input type=&quot;text&quot; name=&quot;pda&quot; class=&quot;easyui-validatebox&quot; required=&quot;true&quot; /&gt;
              &lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
              &lt;td&gt;快递员类型&lt;/td&gt;
              &lt;td&gt;
                &lt;input type=&quot;text&quot; name=&quot;type&quot; class=&quot;easyui-validatebox&quot; required=&quot;true&quot; /&gt;
              &lt;/td&gt;
              &lt;td&gt;取派标准&lt;/td&gt;
              &lt;td&gt;
                &lt;input type=&quot;text&quot; name=&quot;standard.id&quot; 
                    class=&quot;easyui-combobox&quot; 
                    data-options=&quot;required:true,valueField:&#39;id&#39;,textField:&#39;name&#39;,
                      url:&#39;../../standard_findAll.action&#39;&quot;/&gt;
              &lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
              &lt;td&gt;车型&lt;/td&gt;
              &lt;td&gt;
                &lt;input type=&quot;text&quot; name=&quot;vehicleType&quot; class=&quot;easyui-validatebox&quot; required=&quot;true&quot; /&gt;
              &lt;/td&gt;
              &lt;td&gt;车牌号&lt;/td&gt;
              &lt;td&gt;
                &lt;input type=&quot;text&quot; name=&quot;vehicleNum&quot; class=&quot;easyui-validatebox&quot; required=&quot;true&quot; /&gt;
              &lt;/td&gt;
            &lt;/tr&gt;
          &lt;/table&gt;
        &lt;/form&gt;
      &lt;/p&gt;
    &lt;/p&gt;
    &lt;!-- 查询快递员--&gt;
    &lt;p class=&quot;easyui-window&quot; title=&quot;查询快递员窗口&quot; closed=&quot;true&quot; id=&quot;searchWindow&quot; collapsible=&quot;false&quot; minimizable=&quot;false&quot; maximizable=&quot;false&quot; style=&quot;width: 400px; top:40px;left:200px&quot;&gt;
      &lt;p style=&quot;overflow:auto;padding:5px;&quot; border=&quot;false&quot;&gt;
        &lt;form id=&quot;searchForm&quot;&gt;
          &lt;table class=&quot;table-edit&quot; width=&quot;80%&quot; align=&quot;center&quot;&gt;
            &lt;tr class=&quot;title&quot;&gt;
              &lt;td colspan=&quot;2&quot;&gt;查询条件&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
              &lt;td&gt;工号&lt;/td&gt;
              &lt;td&gt;
                &lt;input type=&quot;text&quot; name=&quot;courierNum&quot; /&gt;
              &lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
              &lt;td&gt;收派标准&lt;/td&gt;
              &lt;td&gt;
                &lt;input type=&quot;text&quot; name=&quot;standard.name&quot; /&gt;
              &lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
              &lt;td&gt;所属单位&lt;/td&gt;
              &lt;td&gt;
                &lt;input type=&quot;text&quot; name=&quot;company&quot; /&gt;
              &lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
              &lt;td&gt;类型&lt;/td&gt;
              &lt;td&gt;
                &lt;input type=&quot;text&quot; name=&quot;type&quot; /&gt;
              &lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
              &lt;td colspan=&quot;2&quot;&gt;&lt;a id=&quot;searchBtn&quot; href=&quot;#&quot; class=&quot;easyui-linkbutton&quot; data-options=&quot;iconCls:&#39;icon-search&#39;&quot;&gt;查询&lt;/a&gt; &lt;/td&gt;
            &lt;/tr&gt;
          &lt;/table&gt;
        &lt;/form&gt;
      &lt;/p&gt;
    &lt;/p&gt;
  &lt;/body&gt;
&lt;/html&gt;

Copy after login

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!