JS關(guān)鍵字變色實(shí)現(xiàn)思路及代碼
public static string ReplaceRed(string strtitle, string redkey)
{
if (redkey == "" || redkey == null)
{
return strtitle;
}
else
strtitle = strtitle.Replace(redkey, " <font color='#ff0000'>" + redkey + " </font>");
return strtitle;
}
該方法缺點(diǎn)是:點(diǎn)字符是含大小寫的英文時(shí),變色后統(tǒng)一替換為了關(guān)鍵字的大小寫,體驗(yàn)不好。
2.用正則,CSS背景變色
protected string HighlightText(string inputText,string searchWord)
{
System.Text.RegularExpressions.Regex expression = new System.Text.RegularExpressions.Regex(searchWord.Replace(" ", "|"), System.Text.RegularExpressions.RegexOptions.IgnoreCase);
return expression.Replace(inputText,new System.Text.RegularExpressions.MatchEvaluator(ReplaceKeywords));
}
public string ReplaceKeywords(System.Text.RegularExpressions.Match m)
{
return "<span class='highlightTxtSearch'>" + m.Value + "</span>";//關(guān)鍵字背景加色
//return "<font color='#ff0000'>" + m.Value + "</font>";//關(guān)鍵字變色
}
該方法可結(jié)合前臺(tái)JS調(diào)用:
<style type="text/css">
.highlightTxtSearch
{
background-color:Yellow;
}
</style>
<script type="text/javascript">
$(function () {
$('#tt').datagrid({
url: '@Url.Content("~/Domain/LoadDomainAdmin")',
width: "90%",
height: 400,
fitColumns: true,
nowrap: false,
idField: 'UserID',
pagination: true,
pageNumber: 1,
singleSelect: true,
frozenColumns: [[{ field: 'radio', formatter: function (value, row, index) {
return '<input type="radio" name="rd_action" />';
}
}]],
columns: [[
{ field: 'UserID', title: 'UserID', width: 260, hidden: 'true' },
{ field: 'LoginName', title: '@ViewBag.LoginName', width: 180, align: 'left', formatter: function (data) {
//return "<div class='hiddenFontGommom' style='text-align:left;'>" + data + "</div>";
return GetNewData(data);
}
},
{ field: 'FirstName', title: '@ViewBag.FirstName', width: 120, align: 'left', formatter: function (data) {
//return "<div style='text-align:left;' title=" + data + ">" + data + "</div>";
return GetNewData(data);
// var keyword = $.trim($("#txtInfo").val()) == '@ViewBag.SearchText' ? "" : $.trim($("#txtInfo").val());
// if (keyword == "") {
// return "<div style='text-align:left;' title=" + data + ">" + data + "</div>";
// }
// else {
// var returnData = "";
// $.ajax({
// type: "POST",
// url: '@Url.Content("~/Domain/HighlightText")' + "?inputText=" + data + "&searchWord=" + keyword,
// async: false,
// success: function (newdata) {
// //重新賦值
// returnData = newdata;
// },
// error: function () {
// //不修改returnData值
// }
// });
// return "<div style='text-align:left;' title=" + data + ">" + returnData + "</div>";
// }
}
},
{ field: 'LastName', title: '@ViewBag.LastName', width: 120, align: 'left', formatter: function (data) {
//return "<div style='text-align:left;' title=" + data + ">" + data + "</div>";
return GetNewData(data);
}
},
{ field: 'Email', title: '@ViewBag.Email', width: 180, align: 'left', formatter: function (data) {
return "<div class='hiddenFontGommom' style='text-align:left;' title=" + data + ">" + data + "</div>";
}
},
// { field: 'Domian', title: '@ViewBag.Domian', width: 180, align: 'left', formatter: function (data) {
// return "<div style='text-align:left;' title=" + data + ">" + data + "</div>";
// }
// },
// { field: 'Role', title: '@ViewBag.Role', width: 180, align: 'left', formatter: function (data) {
// return "<div style='text-align:left;' class='hiddenFontGommom' title=" + data.replace(" ", "").replace(" ", "") + ">" + data + "</div>";
// }
// },
// {field: 'IsEnabled', title: '@ViewBag.State', align: 'center', width: 150, formatter: function (val) {
// if (val == true)
// return "<div class='devicetypes_a_box'>True</div>";
// else
// return "<div class='devicetypes_a_box'>False</div>";
// }
// }
]],
onBeforeLoad: function (row, param) {
//移除頭部批量勾選框
$(".datagrid-header-check input").css("visibility", "hidden");
//隱藏分頁
//$(".datagrid-pager").css("display", "none");
//$(".datagrid-pager").removeClass("datagrid-pager");
return true;
},
onLoadSuccess: function (data) {
if (data.rows.length == 0) {
$(".datagrid-view2 .datagrid-body").html("<div style='text-align:center; margin-top:0px; height:50px;'>" + userManage_index_SearchMsg + "</div>");
}
else {
$('#tt').datagrid('selectRecord', '@ViewBag.AdminId');
$("input[name=rd_action]", $("div.datagrid-view1 tr.datagrid-row-selected")).attr("checked", "checked");
}
$("div.datagrid-header-check input").removeAttr("checked"); //重新加載時(shí)去掉復(fù)選框的選中
//$('#tt').datagrid('unselectAll');
var queryParams = $('#tt').datagrid('options').queryParams;
queryParams.IsSerach = "NO";
queryParams.DomainId = $("#xDomainId").val();
$('#tt').datagrid('options').queryParams = queryParams;
},
// onSelect: function () {
// ChSelect();
// },
// onUnselect: function () {
// ChSelect();
// },
onClickRow: function (row) {
$("input[name=rd_action]", $("div.datagrid-view1 tr.datagrid-row-selected")).attr("checked", "checked");
}
});
var p = $('#tt').datagrid('getPager');
$(p).pagination({
pageNumber: 1,
pageSize: 10, //每頁顯示的記錄條數(shù),默認(rèn)為10
pageList: [5, 10, 15], //可以設(shè)置每頁記錄條數(shù)的列表
displayMsg: "" //'當(dāng)前顯示 {from} - {to} 條記錄 共 {total} 條記錄',
});
$("#btn_search").click(function () {
$("#importErrorMsg").find("div").css("display", "none");
var queryParams = $('#tt').datagrid('options').queryParams;
queryParams.FullName = $.trim($("#txtInfo").val()) == '@ViewBag.SearchText' ? "" : $.trim($("#txtInfo").val());
queryParams.IsSerach = "YES";
$('#tt').datagrid('options').queryParams = queryParams;
$("#tt").datagrid('reload');
var p = $('#tt').datagrid('getPager');
$(p).pagination({
pageNumber: 1,
pageList: [5, 10, 15], //可以設(shè)置每頁記錄條數(shù)的列表
displayMsg: "" //'當(dāng)前顯示 {from} - {to} 條記錄 共 {total} 條記錄',
});
})
$(".pagination-num").keydown(function (event) {
var event = event || window.event;
if (event.keyCode == 13)
event.keyCode = 9;
if ((event.keyCode < 48 || event.keyCode > 57) && event.keyCode != 8 && event.keyCode != 46 && (event.keyCode < 96 || event.keyCode > 105)) {
event.preventDefault();
event.returnValue = false;
}
});
$(".datagrid-cell").css("textAlign", "center"); //表頭內(nèi)容居中
});
function ChSelect() {
// var row = $('#tt').datagrid('getChecked');
// var rows = $('#tt').datagrid('getRows');
// row.length == rows.length ? $("div.datagrid-header-check input").attr("checked", true) : $("div.datagrid-header-check input").removeAttr("checked");
}
function GetNewData(data) {
var keyword = $.trim($("#txtInfo").val()) == '@ViewBag.SearchText' ? "" : $.trim($("#txtInfo").val());
if (keyword == "") {
return "<div style='text-align:left;' title=" + data + ">" + data + "</div>";
}
else {
var returnData = "";
$.ajax({
type: "POST",
url: '@Url.Content("~/Domain/HighlightText")' + "?inputText=" + data + "&searchWord=" + keyword,
async: false,
success: function (newdata) {
//重新賦值
returnData = newdata;
},
error: function () {
//不修改returnData值
}
});
return "<div style='text-align:left;' title=" + data + ">" + returnData + "</div>";
//title中的data要和后面的data分開,不要后臺(tái)返回的會(huì)讓title中的data也跟著改變
}
}
</script>
- javascript 獲取所有id中包含某關(guān)鍵字的控件的實(shí)現(xiàn)代碼
- JQuery+JS實(shí)現(xiàn)仿百度搜索結(jié)果中關(guān)鍵字變色效果
- js 關(guān)鍵詞高亮(根據(jù)ID/tag高亮關(guān)鍵字)案例介紹
- 調(diào)試Javascript代碼(瀏覽器F12及VS中debugger關(guān)鍵字)
- js中的this關(guān)鍵字詳解
- 用JS將搜索的關(guān)鍵字高亮顯示實(shí)現(xiàn)代碼
- JS關(guān)鍵字球狀旋轉(zhuǎn)效果的實(shí)例代碼
- Javascript中的關(guān)鍵字和保留字整理
- Javascript基礎(chǔ)教程之關(guān)鍵字和保留字匯總
- JavaScript保留關(guān)鍵字匯總
相關(guān)文章
基于canvas實(shí)現(xiàn)的絢麗圓圈效果完整實(shí)例
這篇文章主要介紹了基于canvas實(shí)現(xiàn)的絢麗圓圈效果,以完整實(shí)例形式分析了JavaScript結(jié)合html5的canvas實(shí)現(xiàn)動(dòng)態(tài)圖形的繪制技巧,需要的朋友可以參考下2016-01-01用JS寫的簡(jiǎn)單的計(jì)算器實(shí)現(xiàn)代碼
參加某公司的面試后,有一機(jī)試題目:用web技術(shù)開發(fā)一個(gè)B/S結(jié)構(gòu)的公式解析器。于是想了想思路,神來一筆想先寫個(gè)計(jì)算器程序做基礎(chǔ),于是便寫了這個(gè)程序。2009-09-09基于js里調(diào)用函數(shù)時(shí),函數(shù)名帶括號(hào)和不帶括號(hào)的區(qū)別
下面小編就為大家?guī)硪黄趈s里調(diào)用函數(shù)時(shí),函數(shù)名帶括號(hào)和不帶括號(hào)的區(qū)別。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-07-07js判斷數(shù)據(jù)類型如判斷是否為數(shù)組是否為字符串等等
js判斷數(shù)據(jù)類型如判斷是否為數(shù)組類型、判斷是否為字符串類型、判斷是否為數(shù)值類型等等,本文有幾個(gè)不錯(cuò)的示例,大家可以學(xué)習(xí)下2014-01-01超越Jquery_01_isPlainObject分析與重構(gòu)
isPlainObject是Jquery1.4后提供的新方法,用于判斷對(duì)象是否是純粹的對(duì)象(通過 {} 或者 new Object 創(chuàng)建的)。2010-10-10使用js實(shí)現(xiàn)html標(biāo)簽、文本的隱藏、顯示、刪除及添加
在設(shè)計(jì)網(wǎng)頁時(shí),有時(shí)需要靜態(tài)或動(dòng)態(tài)地隱藏標(biāo)簽或顯示被隱藏的標(biāo)簽,那該怎么實(shí)現(xiàn)呢?這篇文章主要給大家介紹了關(guān)于使用js實(shí)現(xiàn)html標(biāo)簽、文本的隱藏、顯示、刪除及添加的相關(guān)資料,需要的朋友可以參考下2023-06-06js 判斷checkbox是否選中的實(shí)現(xiàn)代碼
大家在很多場(chǎng)合也許會(huì)遇到判斷頁面是否有元素選中,下面介紹的是利用js判斷是否選中CheckBox的方法。2010-11-11JS實(shí)現(xiàn)控制圖片顯示大小的方法【圖片等比例縮放功能】
這篇文章主要介紹了JS實(shí)現(xiàn)控制圖片顯示大小的方法,即實(shí)現(xiàn)圖片等比例縮放功能,涉及JS動(dòng)態(tài)操作頁面元素屬性相關(guān)技巧,需要的朋友可以參考下2017-02-02