Question

我想创建一个如下所示的HTML表：

public class BigBoard extends ActionBarActivity {

private List<Person> persons;
private RecyclerView rv;
private RVAdapter adapter;
private String a,b;
private ProgressDialog pr;




@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    Parse.initialize(this, "app-id", "client-key");
    setContentView(R.layout.activity_big_board);

    Loader abc = new Loader();
    abc.execute();
    adapter = new RVAdapter(persons);
    rv=(RecyclerView)findViewById(R.id.rv);

    LinearLayoutManager llm = new LinearLayoutManager(this);
    rv.setLayoutManager(llm);
    rv.setHasFixedSize(true);



}



private class Loader extends AsyncTask<String, Integer, String> {

    @Override
    protected void onPreExecute() {
        pr = new ProgressDialog(BigBoard.this);
        pr.setProgressStyle(ProgressDialog.STYLE_SPINNER);
        pr.setIndeterminate(true);
        pr.setCancelable(false);
        pr.setMessage("Loading Board");
        pr.show();
        super.onPreExecute();
    }

    @Override
    protected void onProgressUpdate(Integer... values) {
        super.onProgressUpdate(values);

    }

    @Override
    protected String doInBackground(String... urls) {
        initializeData();

        initializeAdapter();


        return null;

    }

    @Override
    protected void onPostExecute(String result) {
        pr.dismiss();

    }

    private void initializeData(){
        persons = new ArrayList<>();


        ParseQuery<ParseObject> query = new ParseQuery<ParseObject>("BigBoard");
        query.findInBackground(new FindCallback<ParseObject>() {
            public void done(List<ParseObject> credentialList, ParseException e) {
                if (e == null) {
                    for(int i=0;i<credentialList.size();i++)
                    {
                        a=credentialList.get(i).getString("Location");
                        b=credentialList.get(i).getString("Feed");
                        persons.add(new Person(a,b));



                        Log.d("OUT", "So the Val::------> " +a +b);


                    }
                } else {
                    Log.d("score", "Error: " + e.getMessage());
                }

                adapter.notifyDataSetChanged();
            }
        });

    }

    private void initializeAdapter(){

        rv.setAdapter(adapter);
    }

}


}

这看起来很简单。问题是我想用jQuery UI对行进行排序。这也很容易（在<key>CFBundleDocumentTypes</key> <array> <dict> <key>CFBundleTypeExtensions</key> <array> <string>png</string> </array> <key>CFBundleTypeIconFile</key> <string>ICON</string> <key>CFBundleTypeName</key> <string>PNG</string> <key>CFBundleTypeRole</key> <string>Viewer</string> </dict> </array>上调用Left context | Right context | Delete row? ------------------------------------------- 1 [input] [input] Y/N 2 [input] [input] Y/N 3 [input] [input] Y/N），但我发现这非常难看，因为数字随行移动。我想要的是只有“真实”行移动，没有索引（1,2,3等）。这些数字应始终位于同一位置，但行可以移动。

我以为我可以简单地在表格中创建一个新的tbody，在thead之后，它只包含数字，然后在仅包含行的tbody上调用.sortable。但是，显然这不起作用：表格不会彼此相邻，而是相互叠加。

任何想法如何处理这个？ JSFiddle上的测试用例：

.sortable()

Answer 1

我建议在伪元素中使用CSS计数器显示为表格单元格：

$("tbody").sortable();
$("button").on("click", function () {
  $(this).closest("tr").fadeOut(300);
});

@import 'https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css';
td {
  padding: 8px;
}
thead > tr:before {
  content: '';
  display: table-cell;
}
tbody {
  counter-reset: row-number;
}
tbody > tr:before {
  counter-increment: row-number;
  content: counter(row-number);
  display: table-cell;
  vertical-align: middle;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<table class="table table-hover table-striped">
  <thead>
    <tr>
      <th>Left context</th>
      <th>Right context</th>
      <th>Delete row?</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="text"></td>
      <td><input type="text"></td>
      <td><button type="button"><i class="fa fa-trash-o"></i></button></td>
    </tr>
    <tr>
      <td><input type="text"></td>
      <td><input type="text"></td>
      <td><button type="button"><i class="fa fa-trash-o"></i></button></td>
    </tr>
    <tr>
      <td><input type="text"></td>
      <td><input type="text"></td>
      <td><button type="button"><i class="fa fa-trash-o"></i></button></td>
    </tr>
    <tr>
      <td><input type="text"></td>
      <td><input type="text"></td>
      <td><button type="button"><i class="fa fa-trash-o"></i></button></td>
    </tr>
    <tr>
      <td><input type="text"></td>
      <td><input type="text"></td>
      <td><button type="button"><i class="fa fa-trash-o"></i></button></td>
    </tr>
    <tr>
      <td><input type="text"></td>
      <td><input type="text"></td>
      <td><button type="button"><i class="fa fa-trash-o"></i></button></td>
    </tr>
  </tbody>
</table>

表中有两个tbody的彼此相邻，thead在上面

1 个答案: