Question

我正在尝试使用Kendo UI Grid控件构建自定义悬停事件。在使用锁定列时，我在使用鼠标悬停时突出显示整行的问题。我无法找到一个直截了当的例子。

目前，悬停的选择如下：

我编写了以下函数来尝试突出整行（锁定和解锁部分），但我似乎无法获得正确的jQuery选择器：

$("#ddhintgrid div.k-grid-content table tbody tr").hover(function () {
        //stuff to do on mouse enter
        var grid = $("#ddhintgrid").data("kendoGrid");
        var rowUid = grid.dataItem(this).uid;

            // select the row currently being edited
        $('[data-uid=' +rowUid + ']').addClass('k-state-hover');
    },
    function () {
        //stuff to do on mouse leave
        $("#ddhintgrid .k-state-hover").removeClass("k-state-hover");
    });

此方法的内容并不重要。当用户将鼠标移动到网格未锁定部分的一行时，我只想让它触发。

我希望触发.hover（）函数的元素是<div class="k-grid-content>元素下的tr元素。见这里：

Answer 1

我通过修改此处找到的解决方案找到了答案：Add jQuery hover effect across two tables。

我将以下代码添加到我的网格的dataSource的dataBound函数中：

var $trs = $('table.k-selectable tbody tr');
$trs.hover(
    function () {
        var i = $(this).index() +1;
        $trs.filter(':nth-child(' +i + ')').addClass('k-state-hover');
    },
    function () {
        var i = $(this).index() +1;
        $trs.filter(':nth-child(' +i + ')').removeClass('k-state-hover');
    }
);

希望这可以帮助其他人解决这个问题。还没有发现任何问题。

Answer 2

尝试

＆＃13;

public class IPActivity extends AppCompatActivity {

    private static final String EXTRA_BLOCKS = "...";

    ArrayList<ViewGroup> mBlockLinks; //contiene i blocchi (i link con le info)

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        final LinearLayout myContainer = (LinearLayout) findViewById(R.id.my_container); //layout presente nell'mainLayout
        mBlockLinks = new ArrayList<>();

        mFirstBlock = (ViewGroup) findViewById(R.id.first_block);//R.id.first_block is the id layout of the block that I include in main Layout
        mDeleteLink = (ImageButton) mFirstBlock.findViewById(R.id.imageButton_delete_link);
        mDeleteLink.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                myContainer.removeView((View) v.getParent());
                mBlockLinks.remove( v.getParent());
            }
        });

        mBlockLinks.add(mFirstBlock);

        mAddLink = (Button) findViewById(R.id.button_add_link);
        mAddLink.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                ViewGroup new_block = (ViewGroup) LayoutInflater.from(v.getContext()).inflate(R.layout.layout_block_input, myContainer, false);
                myContainer.addView(new_block);
                mBlockLinks.add(new_block);

                mDeleteLink = (ImageButton) new_block.findViewById(R.id.imageButton_delete_link);
                mDeleteLink.setOnClickListener(new OnClickListener() {
                    //cancello il link relativo al bottone
                    @Override
                    public void onClick(View v) {
                        myContainer.removeView((View) v.getParent());
                        mBlockLinks.remove( v.getParent());
                    }
                });

            }
        });

        mResult = (Button) findViewById(R.id.button_subnetting);
        mResult.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                Intent intent = new Intent(v.getContext(),ResultActivity.class);
                intent.putExtra(EXTRA_BLOCKS,mBlockLinks);
                startActivity(intent); //the line where appear the Exception
            }
        });
    }
}

＆＃13;

您需要排除第一个和最后一个（页眉和页脚）tr。

此外，您需要遍历相反的表以查找关联的行，以便将CSS设置为＆＃34; k-state-hover＆＃34; /

实施例：我将鼠标悬停在锁定表中的row1上，现在该函数应该为锁定表row1设置css并在＆＃34; k-grid-content＆＃34;中找到row1。表并设置该行的CSS。这两行将具有不同的UID，因此您不能依赖它进行比较，尝试第二个孩子，或者如果您有行数据的唯一键，那么您可以使用它来比较它们

Answer 3

为了正确地对排序等产生影响，必须在网格上的dataBound事件中进行，或者应该能够在客户端进行。我没有测试这些，但它应该工作。

客户端绑定

您需要添加一个函数来使用切换类：

addHoverStyleToGridRow = function () {
    $("table.k-focusable tbody tr").hover(function() {
            $(this).toggleClass("k-state-hover");
        }
    );
};

然后在数据绑定中：

// this is where the hover effect function is bound to grid
$("#ddhintgrid").kendoGrid({ dataBound: addHoverStyleToGridRow });

服务器绑定

如果您正在使用服务器绑定网格，那么：

$(document).ready(function() {
     $("#ddhintgrid").find("table.k-focusable tbody tr").hover(function() {
            $(this).toggleClass("k-state-hover");
        }
    );
});

jQuery需要帮助在具有特定类的div元素中选择tr元素

3 个答案:

客户端绑定

服务器绑定