jquery.autocomplete自动提示
2013-11-15 15:51
232 查看
前台代码
Views\Node\List.cshtml
后台代码
Controllers\NodeController
Views\Node\List.cshtml
@{ ViewBag.Title = "List"; Layout = "~/Views/Shared/_Layout.cshtml"; } <script src="@Url.Content("~/Scripts/jquery-2.0.3.min.js")"></script> <script src="@Url.Content("~/Scripts/jquery-ui-1.10.3.min.js")"></script> <link href="@Url.Content("~/Content/themes/base/jquery-ui.css")" rel="stylesheet"/> <style type="text/css"> .ui-autocomplete { max-height: 168px; overflow-y: auto; /* prevent horizontal scrollbar */ overflow-x: hidden; /* add padding to account for vertical scrollbar */ } .ui-autocomplete { height: 168px; } </style> <script type="text/javascript"> $(function () { $("#menu ul li").eq(0).removeClass("current"); $("#menu ul li").eq(13).addClass("current"); }) $(function () { $("#PublishmentSystemName").autocomplete({ minLength: 0, delay: 500, focus: function (event, ui) { //$(event.target).val(ui.item.label); return false; }, search: function (event, ui) { $("#PublishmentSystemID").val(""); var ra = Math.random(); $(event.target).autocomplete("option", { source: '@Url.Action("GetData")' + '?ra=' + ra }); }, open: function (event, ui) { OnOpen(event, ui); }, source: '@Url.Action("GetData")', select: function (event, ui) { var elem = $(event.target); elem.val(ui.item.label); //alert(ui.item.label + "," + ui.item.value); $.ajax({ url: "/Node/Grid_Node", type: 'post', data: { id: ui.item.value }, success: function (data) { var str = ""; for (var i = 0; i < data.length; i++) { if (i % 2 == 0) { if (data[i].Show == "True") { str += "<tr class=\"odd\">" + "<td style=\"width:150px;\">" + "<input value=\"" + data[i].Id + "\" name=\"Item\" type=\"checkbox\" checked=\"checked\" />" + "</td><td style=\"width:300px;\">" + data[i].Name + "</td></tr>"; } else { str += "<tr class=\"odd\">" + "<td style=\"width:150px;\">" + "<input value=\"" + data[i].Id + "\" name=\"Item\" type=\"checkbox\" />" + "</td><td style=\"width:300px;\">" + data[i].Name + "</td></tr>"; } } else { if (data[i].Show == "True") { str += "<tr>" + "<td style=\"width:150px;\">" + "<input value=\"" + data[i].Id + "\" name=\"Item\" type=\"checkbox\" checked=\"checked\" />" + "</td><td style=\"width:300px;\">" + data[i].Name + "</td></tr>"; } else { str += "<tr>" + "<td style=\"width:150px;\">" + "<input value=\"" + data[i].Id + "\" name=\"Item\" type=\"checkbox\" />" + "</td><td style=\"width:300px;\">" + data[i].Name + "</td></tr>"; } } } $("#trr").html(str); } }); $("#PublishmentSystemID").val(ui.item.value); return false; } }); $("#BookingNo").dblclick(function () { $(this).autocomplete("search"); }); function OnOpen(event, ui) { var elem = $(event.target); var repItems = new Function("return " + elem.data("autocomplete").xhr.responseText)(); if (repItems && repItems.length == 1) { var val = elem.val(); if (CompareVal(repItems[0].label, val)) { var mui = {}; mui.item = repItems[0]; elem.autocomplete("option", "select")(event, mui); elem.autocomplete("close"); } } } }); </script> <script> //全选 function checkAll() { var code_Values = document.all['Item']; if (code_Values.length) { for (var i = 0; i < code_Values.length; i++) { code_Values[i].checked = true; } } else { code_Values.checked = true; } } //全选、反选 function CheckAllReverse(value, obj) { var form = document.getElementsByTagName("form") for (var i = 0; i < form.length; i++) { for (var j = 0; j < form[i].elements.length; j++) { if (form[i].elements[j].type == "checkbox") { var e = form[i].elements[j]; if (value == "selectAll") { e.checked = obj.checked } else { e.checked = !e.checked; } } } } } </script> @using (Html.BeginForm("Update_Node", "Node")) { <h1>栏目类别</h1> <p> <label>网站名称:</label><input id="PublishmentSystemName" type="text" value="" class="auto-complete"> <input id="PublishmentSystemID" type="hidden" value=""> </p> <table class="normal tablesorter fullwidth"> <thead style="display:block;"> <tr> <th style="width:150px;"> <input id="btnOk" type="button" value="全选" onclick="checkAll()" /> <input id="btnNo" type="button" value="反选" onclick="CheckAllReverse()" /> </th> <th style="width:300px;">名称 </th> </tr> </thead> <tbody id="trr" style="height:500px;overflow:auto;display:block;"> </tbody> </table> <input type="submit" value="保存" class="submit" /> }
后台代码
Controllers\NodeController
public ActionResult List() { return View(); } public ActionResult GetData(string term) { ResultMessage<object> query = busi.GetPublishmentSystem(term); return Json(query.Data, JsonRequestBehavior.AllowGet); } public JsonResult Grid_Node(FormCollection collection) { int strid = Convert.ToInt32(Request.Form["id"].ToString()); ResultMessage<object> query = busi.GetNodeList(strid); return Json(query.Data, JsonRequestBehavior.AllowGet); } /// <summary> /// 批量修改 /// </summary> /// <param name="collection"></param> public ActionResult Update_Node(FormCollection collection) { string chkValues = Request.Form["item"]; ResultMessage<object> query = busi.Update_Node(chkValues); return RedirectToAction("index"); }
相关文章推荐
- Jquery实现页面上所有的checkbox只能选中一个
- jQuery Mobile里xxx怎么用呀? (事件篇)
- Jquery+CSS实现缩略图幻灯片
- jquery.validate格式验证
- Jquery操作radio,checkbox,select表单操作实现代码
- jquery.cookie.js用法详解
- jquery取值
- Jquery用法
- IE 10, HTML5 and jQuery 2.x - JavaScript runtime error: 'JSON' is undefined
- 50个必备的实用jQuery代码段
- jQuery 实现拖动浮动层
- jQuery事件之鼠标事件
- JQuery Highcharts 动态图表生成方法
- jquery获取url参数值
- jquery动态插入图片 获取高度宽度
- Jquery和一些Html控件
- jQuery Mobile 50个经典案例
- 手机Web开发 jQuery 获取屏幕高度、宽度
- jQuery 模拟横向滚动条
- jQuery.entend() 方法