网站推广的实际案例网站建设思维

网站推广的实际案例,网站建设思维,中国优秀作文网,搜索引擎优化是什么意思啊jQuery EasyUI 数据网格 - 格式化列#xff08;Column Formatter#xff09; datagrid 的 formatter 属性是最强大、最常用的功能之一#xff0c;它允许你自定义每一列的显示内容。可以返回 HTML 字符串#xff0c;从而实现#xff1a; 状态颜色显示#xff08;如启用绿…jQuery EasyUI 数据网格 - 格式化列Column Formatterdatagrid的formatter属性是最强大、最常用的功能之一它允许你自定义每一列的显示内容。可以返回 HTML 字符串从而实现状态颜色显示如启用绿色、禁用红色操作按钮编辑、删除、查看图片显示进度条、星级评分组合多个字段显示链接、图标等富文本官方参考教程https://www.jeasyui.com/tutorial/datagrid/datagrid3.php在线 Demohttps://www.jeasyui.com/demo/main/index.php?pluginDataGridpitemFormatter步骤 1: 引入 EasyUI 资源linkrelstylesheettypetext/csshrefhttps://www.jeasyui.com/easyui/themes/default/easyui.csslinkrelstylesheettypetext/csshrefhttps://www.jeasyui.com/easyui/themes/icon.cssscripttypetext/javascriptsrchttps://code.jquery.com/jquery-1.12.4.min.js/scriptscripttypetext/javascriptsrchttps://www.jeasyui.com/easyui/jquery.easyui.min.js/script步骤 2: 创建带格式化列的 DataGridtableiddgclasseasyui-datagridtitle用户管理格式化列示例stylewidth:900px;height:500pxdata-optionsurl:get_users.php,fitColumns:true,pagination:true,rownumbers:true,singleSelect:truetheadtrthfieldidwidth80ID/ththfieldusernamewidth100用户名/ththfieldnamewidth100姓名/ththfieldemailwidth180邮箱/ththfieldstatuswidth80aligncenterformatterformatStatus状态/ththfieldregdatewidth100formatterformatDate注册日期/ththfieldscorewidth100formatterformatScore评分/ththfieldavatarwidth80formatterformatAvatar头像/ththfieldactionwidth150aligncenterformatterformatAction操作/th/tr/thead/table步骤 3: 定义各种格式化函数scripttypetext/javascript// 1. 状态格式化颜色文本functionformatStatus(value,row,index){if(value1){returnspan stylecolor:green;font-weight:bold;启用/span;}elseif(value0){returnspan stylecolor:red;禁用/span;}else{returnspan stylecolor:gray;未知/span;}}// 2. 日期格式化functionformatDate(value,row,index){if(!value)return;vardatenewDate(value);returndate.getFullYear()-(0(date.getMonth()1)).slice(-2)-(0date.getDate()).slice(-2);}// 3. 评分格式化星级functionformatScore(value,row,index){varstars;for(vari1;i5;i){if(ivalue){stars★;// 实心星}else{stars☆;// 空心星}}returnspan stylecolor:#ff9800;font-size:16px;stars/span (value);}// 4. 头像格式化显示图片functionformatAvatar(value,row,index){if(value){returnimg srcvalue stylewidth:40px;height:40px;border-radius:50%;;}else{returnimg srcdefault_avatar.jpg stylewidth:40px;height:40px;border-radius:50%;;}}// 5. 操作列格式化按钮functionformatAction(value,row,index){returna hrefjavascript:viewUser(row.id) classeasyui-linkbutton iconClsicon-search plaintrue查看/a a hrefjavascript:editUser(row.id) classeasyui-linkbutton iconClsicon-edit plaintrue编辑/a a hrefjavascript:deleteUser(row.id) classeasyui-linkbutton iconClsicon-remove plaintrue删除/a;}// 操作函数示例functionviewUser(id){$.messager.alert(查看,查看用户详情 ID: id);}functioneditUser(id){$.messager.alert(编辑,打开编辑窗口 ID: id);}functiondeleteUser(id){$.messager.confirm(确认,确定删除 ID 为 id 的用户吗,function(r){if(r){$(#dg).datagrid(reload);$.messager.show({title:成功,msg:删除成功});}});}// 页面加载后解析按钮重要$(function(){// 让格式化后的 linkbutton 生效$.parser.parse(#dg);});/script关键说明formatter 函数签名function(value, row, index)value当前单元格的值row整行数据对象最常用可访问其他字段index行索引返回 HTML可以返回任意 HTML 字符串包括span、img、a等。按钮生效如果返回easyui-linkbutton必须在加载后调用$.parser.parse()解析否则只是普通链接。性能formatter 在每行渲染时调用避免复杂逻辑。高级格式化示例// 组合字段显示functionformatInfo(value,row,index){return用户row.namebr邮箱row.emailbr电话row.phone;}// 进度条functionformatProgress(value,row,index){returndiv stylewidth:100%;background:#f0f0f0;border-radius:4px;div stylewidth:value%;background:#4caf50;height:18px;border-radius:4px;text-align:center;color:white;value%/div/div;}完整效果状态列显示彩色文字。日期自动格式化。评分显示金色五星。头像显示圆形图片。操作列显示三个可点击的图标按钮。更多示例官方格式化列https://www.jeasyui.com/tutorial/datagrid/datagrid3.php复杂格式化 Demohttps://www.jeasyui.com/demo/main/index.php?pluginDataGridpitemFormatter如果需要条件格式化如根据值变色、编辑器结合格式化、自定义 tooltip或格式化冻结列请继续提问