JS关键字变色实现思路及代码


Posted in Javascript onFebruary 21, 2013

1.替换关键字,对字体变色

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; 
}

该方法缺点是:点字符是含大小写的英文时,变色后统一替换为了关键字的大小写,体验不好。
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>";//关键字背景加色 
//return "<font color='#ff0000'>" + m.Value + "</font>";//关键字变色 
}

该方法可结合前台JS调用
<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"); //重新加载时去掉复选框的选中 
//$('#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, //每页显示的记录条数,默认为10 
pageList: [5, 10, 15], //可以设置每页记录条数的列表 
displayMsg: "" //'当前显示 {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], //可以设置每页记录条数的列表 
displayMsg: "" //'当前显示 {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"); //表头内容居中 
}); 
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分开,不要后台返回的会让title中的data也跟着改变 
} 
} 
</script>
Javascript 相关文章推荐
iis6+javascript Add an Extension File
Jun 13 Javascript
仿新浪微博返回顶部的jquery实现代码
Oct 01 Javascript
实现点击列表弹出列表索引的两种方式
Mar 08 Javascript
jquery访问ashx文件示例代码
Aug 11 Javascript
js判断浏览器版本以及浏览器内核的方法
Jan 20 Javascript
jQuery Easyui快速入门教程
Aug 21 Javascript
JavaScript中setTimeout的那些事儿
Nov 14 Javascript
jQuery延迟执行的实现方法
Dec 21 Javascript
关于vuex的学习实践笔记
Apr 05 Javascript
jquery实现联想词搜索框和搜索结果分页的示例
Oct 10 jQuery
layer弹出层取消遮罩的方法
Sep 25 Javascript
JS中多层次排序算法的实现代码
Jan 06 Javascript
js数组Array sort方法使用深入分析
Feb 21 #Javascript
js自定义方法通过隐藏iframe实现文件下载
Feb 21 #Javascript
jquery实现每个数字上都带进度条的幻灯片
Feb 20 #Javascript
javascript通过class来获取元素实现代码
Feb 20 #Javascript
javascript自适应宽度的瀑布流实现思路
Feb 20 #Javascript
Raphael带文本标签可拖动的图形实现代码
Feb 20 #Javascript
IE关闭时判断及AJAX注销案例学习
Feb 18 #Javascript
You might like
在同一窗体中使用PHP来处理多个提交任务
2006/10/09 PHP
Godaddy空间Zend Optimizer升级方法
2010/05/10 PHP
php-redis中的sort排序函数总结
2015/07/08 PHP
ThinkPHP下表单令牌错误与解决方法分析
2017/05/20 PHP
php简单读取.vcf格式文件的方法示例
2017/09/02 PHP
PHP安装memcache扩展的步骤讲解
2019/02/14 PHP
JQUERY复选框CHECKBOX全选,取消全选
2008/08/30 Javascript
jQuery文本框(input textare)事件绑定方法教程
2013/04/24 Javascript
javascript实现原生ajax的几种方法介绍
2013/09/21 Javascript
JS绘制生成花瓣效果的方法
2015/08/05 Javascript
js获取本机操作系统类型的两种方法
2015/12/19 Javascript
总结jQuery插件开发中的一些要点
2016/05/16 Javascript
jQuery动态添加可拖动元素完整实例(附demo源码下载)
2016/06/21 Javascript
详解Nodejs基于mongoose模块的增删改查的操作
2016/12/21 NodeJs
浅谈React Native 中组件的生命周期
2017/09/08 Javascript
import与export在node.js中的使用详解
2017/09/28 Javascript
JS简单获取并修改input文本框内容的方法示例
2018/04/08 Javascript
webuploader分片上传的实现代码(前后端分离)
2018/09/10 Javascript
[02:12]2019完美世界全国高校联赛(春季赛)报名开启
2019/03/01 DOTA
python解析xml文件实例分析
2015/05/27 Python
Python-嵌套列表list的全面解析
2016/06/08 Python
Python基于Socket实现的简单聊天程序示例
2017/08/05 Python
python实现list由于numpy array的转换
2018/04/04 Python
pycharm 取消默认的右击运行unittest的方法
2018/11/29 Python
python内存动态分配过程详解
2019/07/15 Python
通过 Python 和 OpenCV 实现目标数量监控
2020/01/05 Python
python GUI库图形界面开发之PyQt5美化窗体与控件(异形窗体)实例
2020/02/25 Python
linux系统下pip升级报错的解决方法
2021/01/31 Python
实例教程 纯CSS3打造非常炫的加载动画效果
2014/11/05 HTML / CSS
W3C公布最新的HTML5标准草案
2008/10/17 HTML / CSS
世界上最大的在线旅行社新加坡网站:Expedia新加坡
2016/08/25 全球购物
大学新生军训方案
2014/05/03 职场文书
2014最新毕业证代领委托书
2014/09/26 职场文书
辞职信的写法
2015/02/27 职场文书
高中生个性发展自我评价
2015/03/09 职场文书
自主招生学校推荐信范文
2015/03/26 职场文书