ExtJs星级评分Rating组件实现星级评分

最新推荐文章于 2024-06-19 15:33:49 发布
最新推荐文章于 2024-06-19 15:33:49 发布
阅读量984 收藏
点赞数
分类专栏： 一个小白的道路 文章标签： extjs 插件 widget
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gfgf555/article/details/78603559
版权

利用extjs封装的源生插件rating，可以实现星星评分功能。

在grid中显示组件需要加入一个widget来装载rating，返回的dataIndex就是rating的值

Grid显示rating组件


rating的值为int，默认为1，默认显示一颗星，相对的1-5.是一至五颗星，但是rating本身并没有name，data等属性，只能拿到value，这时reportScore这个字段我们给他隐藏掉，点击星星的时候我们可以拿到rating的值，然后赋给reportScore,表单提交是提交reportScope，就把星星的值提上去,回显原理一样，拿到reportScore的值赋给星星的value就可以了

添加rating的值，使星星发生变化

安若浮生
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
extjs自定义控件　星形评分组件
hhjjjh的专栏
04-10 376
/* 星级评分组件,示例 { xtype: 'starrating', name: 'F_Score_Number', fieldLabel: '简历质量评分', allowBlank: true, readOnly: false } */ Ext.define('Pactera.widget.StarRating', { alias: "widget.starrati...
18｜ 无代码开发 ｜如何制作星星式评分
2301_76262110的博客
03-29 457
很多网站、APP等的评价系统都有按星级评分的功能，大部分是5个星级，依次代表1~5分。用户只需要在某个星星上点击一下就可完成打分，操作难度低，也能让商家快速得到反馈。对商家而言，得到用户反馈非常重要，它可以直接向你反馈产品的受众效果。而对用户而言，通过评论和评分可以直观地判定 App 的质量。众所周知，无论是买车、买电影票还是下载 App，他人反馈在用户购买决定中起着非同一般的作用。此外，如果某款产品评分达到了 4 星及以上的，更容易受到潜在用户的青睐。
ExtJS（3）- 自定义组件（星级评分）
weixin_34010949的博客
10-16 384
今天介绍ExtJS的组件开发，这里以星级评分为示例，首先来看看效果图：然后是功能操作：鼠标移动到五个星星上面时，会有tooltip显示当前的分值。如图：鼠标悬停在第四颗星星时前四颗星星显示高亮笑脸，当点击下去时锁定笑脸并且设定份数为4。然后我们来说一下实现原理，Ext的组件基本单元是Ext.Component，所以自定义组件可以继承Component，...
如何在Vue3中创建一个星级评分组件
最新发布
有我更精彩的博客
06-19 461
在现代web开发中，用户体验至关重要。星级评分组件作为交互设计中的一个常见元素，广泛应用于电商平台、餐厅点评网站、电影评分系统等。今天，我们将详细介绍如何在Vue3中创建一个星级评分组件，从零开始一步一步构建，希望能帮助到各位前端开发者。
ExtJS 4.2 评分组件
weixin_34032779的博客
10-16 137
上一文章是扩展ExtJS自带的Date组件。在这里将创建一个评分组件。 目录 1. 介绍 2. 示例 3. 资源下载   1. 介绍 代码参考的是 Sencha Touch 2上的一个RatingStar扩展插件，在此基础上做了移植到ExtJS 4.2，并扩展了默认值、form表单支持等功能。 1.1 JavaScript代码 /*! * 评分组件 */ Ext.def...
extjs各种常用组件归纳总结
11-07
extjs各种组件的详细实现及各种扩展归纳总结，包括各种grid，tree，布局，表单，ajax，弹出框等
Extjs单独定义各组件的实例代码
10-27
在EXTJS中，组件是构建用户界面的基本元素，它们可以是按钮、文本框、表格、面板等。在提供的实例中，我们看到如何单独定义并使用几种EXTJS组件，包括ComboBox（下拉框）、TextField（文本框）、Button以及Toolbar。...
extjs时间日期选择组件
01-07
在EXTJS这个强大的JavaScript框架中，时间日期选择组件是一个至关重要的元素，它为用户提供了方便的方式来选择和输入日期和时间。这些组件使得Web应用程序能够更好地处理时间相关的数据输入，提高用户体验，同时也...
Extjs2.x 实现文件上传组件
03-25
在ExtJS 2.x版本中，实现文件上传组件是一项常见的需求，它允许用户在Web应用中选择并上传本地文件到服务器。在本文中，我们将深入探讨如何在ExtJS 2.x中实现这一功能。 首先，我们需要理解ExtJS中的FormPanel组件...
Extjs 年月日时分秒组件
09-12
在ExtJS中，开发人员可以利用其丰富的组件库来创建各种用户界面元素，包括日期选择器。"Extjs 年月日时分秒组件"是一个特定的插件，允许用户在应用程序中选择精确到时分秒的时间。这种组件对于需要用户输入特定时间...
ExtJS4中使用mixins实现多继承示例
10-26
在ExtJS4中，开发人员有时需要为组件或者类实现多继承的功能，即一个类能够同时继承多个类的属性和方法。在这种情况下，`mixins`机制就显得尤为重要。本示例将详细介绍如何在ExtJS4中利用`mixins`实现多继承。 首先...
自定义的星级评分样式
11-04
自定义的星级评分样式；该demo的博客地址：http://blog.csdn.net/qq_21445563/article/details/53032155
js插件---评分插件Rating如何使用
weixin_34100227的博客
09-03 631
js插件---评分插件Rating如何使用 一、总结 一句话总结：form下的input和a标签，input记录值，a标签显示样式 12 <form data-am-rating> 13 <input type="hidden" name="score"> 14 <a class="am-padding-lg" data-am-icons="hear.
Ext.js5表单，表格—（等级，评级）小部件(45)
鹿惊的博客
12-21 613
view/** * Demonstrates the rating widget in a form and grid column. * 在表和网格中使用rating widget */ Ext.define('KitchenSink.view.form.RatingForm', { extend: 'Ext.panel.Panel', xtype: 'form-rating
Android RatingBar控件
假装你是大灰狼的专栏
08-24 1925
1. RatingBar类 RatingBar类用于显示星条。主要属性 numStars，指定星星个数 rating，指定默认点亮的星星星星个数 stepSize，指定步进数，1，0.5是常用值 通过setOnRatingBarChangeListener的回调方法实现RatingBar的拖动事件。 onRatingChanged，进度发生改变时会触发 定义一个RatingBa...
星级评分RatingBar
程序员深夜写bug
12-23 896
1、布局文件 <RatingBar android:id="@+id/ratingBar1" android:numStars="5" android:rating="3.5" android:isIndicator="true" android:layout_width="wrap_content"
[Sencha ExtJS]理解 ExtJS 5+ 里的 Widgets（小部件）
小桥流水丿小溪
04-29 3623
英文原文：Understanding Widgets in Ext JS 5 转载来自黄灯桥的博客：http://blog.csdn.net/tianxiaode/article/details/40655027 API 文档中对 Widget 的解释： Ext.Widget is a light-weight Component that consists of nothing m
【翻译】了解Ext JS 5的小部件
weixin_34024034的博客
10-31 115
原文：Understanding Widgets in Ext JS 5在Ext JS 5，引入了新的“widgetcolumn”，支持在网格的单元格中放置组件。同时，还在Ext JS 5引入了一种新的被称为“小部件”的轻量级组件。在Ext JS 5中，已包含了几个小部件，在本文将告诉你如何轻松的去打造自己的小部件。为了说明其中的关键概念，在文中将创建一个简单的名为“ratings”的如下图所...
使用extjs，为testarea组件实现每行行号的显示
06-13
您可以使用Ext.grid.RowNumberer插件来为textarea组件实现每行行号的显示。以下是示例代码： ```javascript Ext.create('Ext.form.Panel', { title: 'TextArea with Line Numbers', width: 400, height: 200, ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值