How to freeze first column of the table?

Question

I have a table which is implemented by making use of jquery EasyUI . I want first column of the table to be freezed and remaing column should have scrollbar when the page is in smaller screen. Code Here snippet

How can I freeze only Title1 column.

I tried adding that Title1 column in Datagrid-view1 to achieve this. But I couldn't able to find proper solution ..Thanks in advance

Answer 1

The documentation you're looking for is here: https://www.jeasyui.com/documentation/index.php

According to the documentation, you're looking for the frozenColumns option. You take the columns you want frozen out of the columns section and add them in frozenColumns .

Something like this:

frozenColumns: [[
    {field:'f1',title:'title1',width:100,editor:'text'},
]],
columns:[[
    {field:'f2',title:'title2',width:100,editor:'text'},
    {field:'f3',title:'title3',width:100,editor:'text'},
    {field:'f4',title:'NotSave',width:50,
    editor:{type:'checkbox',options:{on:1,off:0}}}
]],

You also need to turn off fitColumns .

fitColumns: false,

With these settings I get a horizontal scrollbar in the code you put up.