jQuery EasyUI在WIN怎麼使用

這次帶給大家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(){
        $(&#39;#addWindow&#39;).window("open");
      }
      function doEdit(){
        alert("修改...");
      }
      function doDelete(){
        alert("删除...");
      }
      function doRestore(){
        alert("将取派员还原...");
      }
      //工具栏
      var toolbar = [ {
        id : &#39;button-add&#39;, 
        text : &#39;增加&#39;,
        iconCls : &#39;icon-add&#39;,
        handler : doAdd
      }, {
        id : &#39;button-edit&#39;,
        text : &#39;修改&#39;,
        iconCls : &#39;icon-edit&#39;,
        handler : doEdit
      }, {
        id : &#39;button-delete&#39;,
        text : &#39;作废&#39;,
        iconCls : &#39;icon-cancel&#39;,
        handler : doDelete
      },{
        id : &#39;button-restore&#39;,
        text : &#39;还原&#39;,
        iconCls : &#39;icon-save&#39;,
        handler : doRestore
      }];
      // 定义列
      var columns = [ [ {
        field : &#39;id&#39;,
        checkbox : true,
      },{
        field : &#39;courierNum&#39;,
        title : &#39;工号&#39;,
        width : 80,
        align : &#39;center&#39;
      },{
        field : &#39;name&#39;,
        title : &#39;姓名&#39;,
        width : 80,
        align : &#39;center&#39;
      }, {
        field : &#39;telephone&#39;,
        title : &#39;手机号&#39;,
        width : 120,
        align : &#39;center&#39;
      }, {
        field : &#39;checkPwd&#39;,
        title : &#39;查台密码&#39;,
        width : 120,
        align : &#39;center&#39;
      }, {
        field : &#39;pda&#39;,
        title : &#39;PDA号&#39;,
        width : 120,
        align : &#39;center&#39;
      }, {
        field : &#39;standard.name&#39;,
        title : &#39;取派标准&#39;,
        width : 120,
        align : &#39;center&#39;,
        formatter : function(data,row, index){
          if(row.standard != null){
            return row.standard.name;
          }
          return "";
        }
      }, {
        field : &#39;type&#39;,
        title : &#39;取派员类型&#39;,
        width : 120,
        align : &#39;center&#39;
      }, {
        field : &#39;company&#39;,
        title : &#39;所属单位&#39;,
        width : 200,
        align : &#39;center&#39;
      }, {
        field : &#39;deltag&#39;,
        title : &#39;是否作废&#39;,
        width : 80,
        align : &#39;center&#39;,
        formatter : function(data,row, index){
          if(data=="0"){
            return "正常使用"
          }else{
            return "已作废";
          }
        }
      }, {
        field : &#39;vehicleType&#39;,
        title : &#39;车型&#39;,
        width : 100,
        align : &#39;center&#39;
      }, {
        field : &#39;vehicleNum&#39;,
        title : &#39;车牌号&#39;,
        width : 120,
        align : &#39;center&#39;
      } ] ];
      $(function(){
        // 先将body隐藏，再显示，不会出现页面刷新效果
        $("body").css({visibility:"visible"});
        // 取派员信息表格
        $(&#39;#grid&#39;).datagrid( {
          iconCls : &#39;icon-forward&#39;,
          fit : true,
          border : false,
          rownumbers : true,
          striped : true,
          pageList: [30,50,100],
          pagination : true,
          toolbar : toolbar,
          url : "../../data/courier.json",
          idField : &#39;id&#39;,
          columns : columns,
          onDblClickRow : doDblClickRow
        });
        // 添加取派员窗口
        $(&#39;#addWindow&#39;).window({
          title: &#39;添加取派员&#39;,
          width: 800,
          modal: true,
          shadow: true,
          closed: true,
          height: 400,
          resizable:false
        });
        //对收派标准save按钮，添加点击事件
        $("#save").click(function(){
          //判断是否form中的所有表单对象都通过校验
          if($("#standardForm").form(&#39;validate&#39;)){
            //都通过校验
            $("#standardForm").submit();
          }else{
            $.messager.alert("警告","表单存在非法内容，请重新填写","warning");
          }
          //关闭窗口
          $("#addWindow").window(&#39;sclose&#39;);
        });
      });
      function doDblClickRow(){
        alert("双击表格数据...");
      }
    </script>
  
  
    <p>
      </p>

         

      

        

          保存         

             

        

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            

收派员信息
快递员工号		姓名
手机		所属单位
查台密码		PDA号码
快递员类型		取派标准
车型		车牌号

        

                     

      

        

                                                                                                                                                                                                                                                                                                                                       

查询条件
工号
收派标准
所属单位
类型
查询

        

              

我相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

jquery在輸入框中尋找關鍵字並高亮

使用JS做出60秒後重新傳送驗證碼功能

JS陣列去重圖文詳解

以上是jQuery EasyUI在WIN怎麼使用的詳細內容。更多資訊請關注PHP中文網其他相關文章！