JS关键字变色实现思路及代码_javascript技巧
程序员文章站
2023-12-25 17:14:03
...
1.替换关键字,对字体变色
public static string ReplaceRed(string strtitle, string redkey)
{
if (redkey == "" || redkey == null)
{
return strtitle;
}
else
strtitle = strtitle.Replace(redkey, " " + redkey + " ");
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 "" + m.Value + "";//关键字背景加色
//return "" + m.Value + "";//关键字变色
}
该方法可结合前台JS调用:
";
return GetNewData(data);
}
},
{ field: 'FirstName', title: '@ViewBag.FirstName', width: 120, align: 'left', formatter: function (data) {
//return "
return GetNewData(data);
// var keyword = $.trim($("#txtInfo").val()) == '@ViewBag.SearchText' ? "" : $.trim($("#txtInfo").val());
// if (keyword == "") {
// return "
// }
// 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 "
// }
}
},
{ field: 'LastName', title: '@ViewBag.LastName', width: 120, align: 'left', formatter: function (data) {
//return "
return GetNewData(data);
}
},
{ field: 'Email', title: '@ViewBag.Email', width: 180, align: 'left', formatter: function (data) {
return "
}
},
// { field: 'Domian', title: '@ViewBag.Domian', width: 180, align: 'left', formatter: function (data) {
// return "
// }
// },
// { field: 'Role', title: '@ViewBag.Role', width: 180, align: 'left', formatter: function (data) {
// return "
// }
// },
// {field: 'IsEnabled', title: '@ViewBag.State', align: 'center', width: 150, formatter: function (val) {
// if (val == true)
// return "
// else
// return "
// }
// }
]],
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("
}
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 57) && event.keyCode != 8 && event.keyCode != 46 && (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 "
}
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 "
//title中的data要和后面的data分开,不要后台返回的会让title中的data也跟着改变
}
}
复制代码 代码如下:
public static string ReplaceRed(string strtitle, string redkey)
{
if (redkey == "" || redkey == null)
{
return strtitle;
}
else
strtitle = strtitle.Replace(redkey, " " + redkey + " ");
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 "" + m.Value + "";//关键字背景加色
//return "" + m.Value + "";//关键字变色
}
该方法可结合前台JS调用:
复制代码 代码如下:
复制代码 代码如下:
return GetNewData(data);
}
},
{ field: 'FirstName', title: '@ViewBag.FirstName', width: 120, align: 'left', formatter: function (data) {
//return "
" + data + "
"; return GetNewData(data);
// var keyword = $.trim($("#txtInfo").val()) == '@ViewBag.SearchText' ? "" : $.trim($("#txtInfo").val());
// if (keyword == "") {
// return "
" + data + "
"; // }
// 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 "
" + returnData + "
"; // }
}
},
{ field: 'LastName', title: '@ViewBag.LastName', width: 120, align: 'left', formatter: function (data) {
//return "
" + data + "
"; return GetNewData(data);
}
},
{ field: 'Email', title: '@ViewBag.Email', width: 180, align: 'left', formatter: function (data) {
return "
" + data + "
"; }
},
// { field: 'Domian', title: '@ViewBag.Domian', width: 180, align: 'left', formatter: function (data) {
// return "
" + data + "
"; // }
// },
// { field: 'Role', title: '@ViewBag.Role', width: 180, align: 'left', formatter: function (data) {
// return "
" + data + "
"; // }
// },
// {field: 'IsEnabled', title: '@ViewBag.State', align: 'center', width: 150, formatter: function (val) {
// if (val == true)
// return "
True
"; // else
// return "
False
"; // }
// }
]],
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("
" + userManage_index_SearchMsg + "
"); }
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 57) && event.keyCode != 8 && event.keyCode != 46 && (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 "
" + data + "
"; }
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 "
" + returnData + "
"; //title中的data要和后面的data分开,不要后台返回的会让title中的data也跟着改变
}
}
推荐阅读
-
JS关键字变色实现思路及代码_javascript技巧
-
js或者jquery判断图片是否加载完成实现代码_javascript技巧
-
js 图片随机不定向浮动的实现代码_javascript技巧
-
js获取元素相对窗口位置的实现代码_javascript技巧
-
js 判断checkbox是否选中的实现代码_javascript技巧
-
js仿百度有啊通栏展示效果实现代码_javascript技巧
-
利用js实现前台动态添加文本框,后台获取文本框内容(示例代码)_javascript技巧
-
js下通过prototype扩展实现indexOf的代码_javascript技巧
-
js实现点小图看大图效果的思路及示例代码_javascript技巧
-
js用Date对象处理时间实现思路及代码_基础知识