<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=yes" />
<html>
<head>
<script src='../js/jquery-1.11.1.min.js'></script>
<script src='../js/jquery-ui.min.js'></script>
<link rel='stylesheet' type='text/css' href='../css/jquery-ui.min.css'/>
<title>Insert title here</title>
</head>

<style>

.search_table th {
    border: 1px solid #D7A35E;
    height: 24px;
    line-height: 24px;
    background: #D7A35E;}
    .search_table tbody tr:nth-child(even) {
    background: #FFF7EA;
}

.search_table td {
    border: 1px solid #D7A35E;
    height: 24px;
    line-height: 24px;
    padding-left: 6px;
}
.search_table {
    margin-top: 20px;
    overflow: hidden;
    border-collapse: collapse;
}
.ui-widget-header{
    background: #D7A35E;
}
*{font-size:9pt;font-family:'微软雅黑'};
</style>
<body>
    <input id="hmas_code" maxlength="12" name="hmas_code" type="text" /><input type="button"  dialog-id="hmas" class="fetch_code" value="检索"/>
    <div class="dialog" id="hmas" dlg-width="475" dlg-title="商品检索" 
      table-name="vhuiy" code-id="hmas_code" name-id="hmas_name">
    </div>
</body>
<script>
var fetch_dialog={
        key_id  : "",
        key_val : "",
        key_len : 0,
        fld_id  : "",
        fld_name: "",
        tbl_name: "",
        dlg_id  : "",
        dlg_title: "",
        view    :"vhuiy",
        items    :"id, name",
        aligns    :"l,l",
        links    :"id,id",
        pgCount    :"",
        where    :"",
        order    :"",
        pgNumber:"",
        rowCount:10,
        onFindClick:"fetch_dialog.onFindClick",
        onLinkClick:"fetch_dialog.onsetval",
        onsetval:function(id,no,_this){
              $(dlg_id).dialog("close");
              $("#hmas_code").val($(_this).parent().next("td").html());
              $("#hmas_code").attr("sid",id);
        },
        onFindClick:function(pgNumber, isNewFind) {
            fetch_dialog.pgNumber=pgNumber;
              if (isNewFind) {
                fetch_dialog.where = fetch_dialog.getQrySql();
                fetch_dialog.order = "id";
                fetch_dialog.pgCount= 0;
              }  
              fetch_dialog.doShowList();
        },
        rowMsg:function(cols, msg) {
              return "<tr><td colspan='"+ cols +"'><font style='text-align:center;'>"+ msg +"</font></td></tr>";
        },
        doShowList:function () {
              //var navi_id = $(desc_id).attr("navi_id");
              var col_cnt = fetch_dialog.aligns.split(",").length;

              //if (navi_id) $(navi_id).css("display", "none");
              $("#data_list").html(fetch_dialog.rowMsg(col_cnt, "查询中..."));

              var p_data = {
                view     : fetch_dialog.view,
                items    : fetch_dialog.items,
                aligns   : fetch_dialog.aligns,
                links    : fetch_dialog.links,
                where    : fetch_dialog.where,
                order    : fetch_dialog.order,
                rowCount : fetch_dialog.rowCount,
                pgCount  : fetch_dialog.pgCount,
                pgNumber : fetch_dialog.pgNumber,
                onClick  : fetch_dialog.onLinkClick
              };

              $.ajax({type: "post", url:"../servlet/showlist", data: p_data, success: function(result) {
                var astr = result.split("\t");
                if (astr[0] == 1) {
                    fetch_dialog.pgCount= astr[1];

                  if (fetch_dialog.pgCount > 0) {
                      fetch_dialog.pgNumber=astr[2];
                    $("#data_list").html(astr[3]);

                    /* if ($(desc_id).attr("pgCount") > 1 && navi_id) {
                      var n_data = {
                        pgCount  : $(desc).attr("pgCount"),
                        pgNumber : $(desc).attr("pgNumber"),
                        onClick  : $(desc).attr("onFindClick")
                      };

                      $.ajax({type: "post", url:"../servlet/shownavi", data: n_data, success: function(result) {
                        var page_id = $(desc_id).attr("page_id");
                        $(page_id).html(result);
                        $(navi_id).css("display", "block");
                      }});
                    } */
                  } else {
                    $("#data_list").html(fetch_dialog.rowMsg(col_cnt, "没有查询到任何数据"));
                  }
                } else {
                  var ms = "获取数据失败!  (程序代码：" + astr[1] + ")\n\n" + astr[2];
                  alert(ms);
                }
              }});
            },
            getQrySql:function() {
                  var rs = "";
                  var serachinfo = $("#dlg_code").val();
                  if(serachinfo != null && serachinfo != "" ){
                    rs = " name like'%"+serachinfo+"%' or CAST(id as text) like'%"+serachinfo+"%'";
                  }
                  return rs;
            },
            open_fetch_dlg:function(dlg_width) {
                var dialogOpts = {
                      open: function() {
                          fetch_dialog.fetch_data(true);
                      },
                      close: function() {
                        $(dlg_id).dialog("close");
                      }
                    };

                    $(dlg_id).dialog({
                      autoOpen: false,
                      modal: true,
                      resizable: false,
                      height: 490,
                      buttons:
                      [
                        {
                          text: "<上页",
                          click: function() {
                            if (page_num > 1) {
                              page_num = page_num - 1;
                              fetch_data(false);
                            }
                          }
                        },
                        {
                          text: "下页>",
                          click: function() {
                            if (page_num < page_count) {
                              page_num = page_num + 1;
                              fetch_data(false);
                            }
                          }
                        }
                      ]
                    });

                    var html_str =
                      "<div class='dlg_html' style='width: 100%;'>" +
                      "  <div style='width: 100%;'>" +
                      "    <input id='dlg_code' class='dlg_code' type='text' maxlength='"+ key_len +"' style='width: 100px;' onkeydown='fetch_dialog.dlg_keydown()'/>&nbsp" +
                      "    <button class='search_btn' type='submit'  id='dlg_btn' onclick='fetch_dialog.dlg_btn_click()'>查询</button>" +
                      "  </div>" +
                      "  <div style='overflow-y: auto; width: 100%; height: 357px; margin-top: 10px;'>" +
                      "    <table class='search_table' width='100%'>" +
                      "      <tr>" +
                      "        <th width='20%'>ID</th>" +
                      "        <th width='80%'>名称</th>" +
                      "      </tr>" +
                      "      <tbody class='select_line' id='data_list'></tbody>" +
                      "    </table>" +
                      "  </div>" +
                      "</div>";

                    $(".dlg_html").remove();
                    $(dlg_id).dialog(dialogOpts);
                    $(dlg_id).dialog("option", "title",  dlg_title);
                    $(dlg_id).dialog("option", "width",  dlg_width);
                    $(dlg_id).html(html_str);
                    $("#dlg_code").val(key_val);
                    $(dlg_id).dialog("open");
                 },
                 dlg_keydown:function() {
                      if (event.keyCode == 13) fetch_dialog.dlg_btn_click();
                 },
                 dlg_btn_click:function() {
                      key_val = $("#dlg_code").val();
                      fetch_dialog.fetch_data(true);
                 },
                 fetch_data:function(isFirst) {
                     fetch_dialog.onFindClick(0, true); 
                 },
                 fetch_code:function() {
                        $(".fetch_code").click(function() {
                            dlg_id = "#" + $(this).attr('dialog-id');
                            dlg_title = $(dlg_id).attr('dlg-title');
                            tbl_name  = $(dlg_id).attr('table-name');//暂时用不上了，改为#desc  隐藏属性
                            key_id    = "#" + $(dlg_id).attr('code-id');
                            key_val   = $(key_id).val();
                            var id=$(key_id).attr("id");
                            $("#dlg_code").val(key_val);
                            key_len   = $(key_id).attr('maxlength');
                           /*  var ss    = $(dlg_id).attr('name-field');
                            fld_name  = !ss ? "name" : ss + " as name"; */
                            var ss = $(dlg_id).attr('name-id');
                            if (ss && ss!="") { fld_id = "#" + ss; }
                            fetch_dialog.open_fetch_dlg($(dlg_id).attr('dlg-width'));
                          });
                    },
                    init:function(){
                        fetch_dialog.fetch_code();
                    }
}

$().ready(function(){
    fetch_dialog.init();
});

</script>
</html>

 

 

 

ps：这是我做的效果，好多不懂什么意思，先粘贴上，以后用到了再调，本文为面向对象的写法（其实就是把属性和方法写在了一个对象里面，感觉写的很菜，之所以写成对象是老大的意思）